Абсолютное позиционирование slick slider?

Здравствуйте! Есть 2 slick слайдера с пэйджерами, хочу наложить один слайдер на другой.
вот код

<div class="main">
<div class="product-slder__in">
       <div class="product-border1">
                <div><img class="b1-1" src="img/b1-1.png"></div>
                <div><img class="b1-1" src="img/b1-1.png"></div>
       </div>
       <div class="product-pager1">
                <div>1</div>
                <div>2</div>
       </div>
</div>
<div class="product-slder__in2">
       <div class="product-border2">
                <div><img class="b1-1" src="img/b1-1.png"></div>
                <div><img class="b1-1" src="img/b1-1.png"></div>
       </div>
       <div class="product-pager2">
                <div>1</div>
                <div>2</div>
       </div>
</div>
</div>

///////////////////////////
CSS

.main{
     position:relative;
}
.product-slder__in, .product-slder__in2{
     position:absolute;
     top:0;
}

JS

jQuery('.product-border1').slick({
		slidesToShow: 1,
		slidesToScroll: 1,
		arrows: false,
		fade: true,
		asNavFor: '.product-color1'
	});
	jQuery('.product-color1').slick({
		slidesToShow: 2,
		slidesToScroll: 1,
		asNavFor: '.product-border1',
		// dots: true,
		focusOnSelect: true
	});
jQuery('.product-border2').slick({
		slidesToShow: 1,
		slidesToScroll: 1,
		arrows: false,
		fade: true,
		asNavFor: '.product-color2'
	});
	jQuery('.product-color2').slick({
		slidesToShow: 2,
		slidesToScroll: 1,
		asNavFor: '.product-border2',
		// dots: true,
		focusOnSelect: true
	});

При задании position absolute второй слайдер не отображается и создает горизонтальную прокрутку.
В чем может быть проблема, подскажите пожалуйста?