Good day to all, the essence of the problem: There is on the slick slider page. There is a need to place it in absolute positioning, but if you set it to position: absolute, then its elements become incredible widths. How can this be overcome? I already thrust it in a bunch of wrappers and that just did not try. Made absolute wrappers and all in vain ... Here is a link to the slider

HTML:

<div class="wrapper"> <div class="wrap"> <div class="slider"> <div class="list" ></div> <!-- /.slider-item --> <div class="list sec" ></div> <!-- /.slider-item --> <div class="list" ></div> <!-- /.slider-item --> <div class="list sec" ></div> <!-- /.slider-item --> <div class="list" ></div> <!-- /.slider-item --> </div> </div> <!-- /.wrap --> </div> <!-- /.wrapper -->

CSS:

 .wrapper{ position: absolute; } .slider { width: auto; margin: 30px 50px 50px; position: relative; } .list{ padding-left: 10px; padding-right: 10px; width: 50px; height: 50px; background-color: #aeaeae; } .sec{ background-color: red; } .slick-prev:before, .slick-next:before { color: black; } .slick-dots { bottom: -30px; }

Js:

 $(".slider").slick({ infinite: true, slidesToShow: 3, slidesToScroll: 1, dots: true, });

    1 answer 1

    You need to set the size of your wrapper.

    See the jsfiddle example

     /** This fiddle is using the latest version of Slick (from master) and jQuery. If your issue occurs in older version or a specific tag; please use the "External Resources" section in the sidebar to correct it. **/ $(".slider").slick({ infinite: true, slidesToShow: 3, slidesToScroll: 1, dots: true, }); 
     .wrapper { position: absolute; width: calc(100vw - 16px); } .slider { width: auto; margin: 30px 50px 50px; position: relative; } .list { padding-left: 10px; padding-right: 10px; width: 50px; height: 50px; background-color: #aeaeae; } .sec { background-color: red; } .slick-prev:before, .slick-next:before { color: black; } .slick-dots { bottom: -30px; } 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script> <link rel="stylesheet" href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css"> <link rel="stylesheet" href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css"> <div class="wrapper"> <div class="wrap"> <div class="slider"> <div class="list"></div> <!-- /.slider-item --> <div class="list sec"></div> <!-- /.slider-item --> <div class="list"></div> <!-- /.slider-item --> <div class="list sec"></div> <!-- /.slider-item --> <div class="list"></div> <!-- /.slider-item --> </div> </div> <!-- /.wrap --> </div> <!-- /.wrapper -->