Absolute positioning of slick slider?

Question

css

Hello! There are 2 slick sliders with pagers, I want to overlay one slider on the other.
here is the code

<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
  });

When position is set to absolute , the second slider is not displayed and creates a horizontal scroll.
What could be the problem, tell me please?