SlickSlidertest

by Sreeraj Saseendran

HTML

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"/>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
   <div style="background: red; padding: 50px; margin: 0;"> <div class="firstDiv">
       <div><h1>A</h1></div>
        <div><h1>B</h1></div>
        <div><h1>C</h1></div>
        <div><h1>D</h1></div>
        <div><h1>E</h1></div>
    </div>
    <div class="secDiv">
       <div><h1>A</h1></div>
        <div><h1>B</h1></div>
        <div><h1>C</h1></div>
        <div><h1>D</h1></div>
        <div><h1>E</h1></div>
    </div>

<div class="slick-wrapper">
    <div class="slick-slider">
    <div class="thirdDiv" style="background:lightblue;">
       <div style="width:150px;min-width:150px;"><img class="classic" src="https://res.cloudinary.com/rmwdam/image/upload/v1708662359/content/AW24/denim-guide/widget/relaxed-straight.png"></div>
        <div style="width:150px;min-width:150px;"><img class="regular-straight" src="https://res.cloudinary.com/rmwdam/image/upload/v1708662359/content/AW24/denim-guide/widget/regular-straight.png"></div>
        <div style="width:100px;min-width:100px;"><img class="regular-tapered" src="https://res.cloudinary.com/rmwdam/image/upload/v1708662359/content/AW24/denim-guide/widget/regular-tapered.png"></div>
        <div style="width:150px;min-width:150px;"><img class="relaxed-straight" src="https://res.cloudinary.com/rmwdam/image/upload/v1708662359/content/AW24/denim-guide/widget/relaxed-straight.png"></div>
        <div style="width:175px;min-width:175px;"><img class="slim-tapered" src="https://res.cloudinary.com/rmwdam/image/upload/v1677630116/content/Image-load-gifs/missing-images.jpg"></div>
    </div>
    </div>
</div>
</div>

CSS

.firstDiv, .secDiv, .thirdDiv {display: flex;}
.thirdDiv div {border: 2px solid green;}
.thirdDiv {max-width: 500px;overflow: hidden;}
.thirdDiv div img {width: 100%;}
.slick-wrapper {width: 500px;}

.slick-slide {
  display: flex;
  width: auto; /* Let content decide width */
}

JavaScript

$(".firstDiv").slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  infinite: false,
});
$(".secDiv").slick({
  slidesToShow: 3,
  slidesToScroll: 3,
  centerMode: false,
  infinite: false,
  variableWidth: true,
});
$(".secDiv").on("click", ".slick-slide", function () {
  // debugger;
  $(".firstDiv").slickGoTo($(this).attr("index"));
});

$(".thirdDiv").slick({
  dots: false,
  infinite: false,
  speed: 300,
  slidesToShow: 3,
  slidesToScroll:1,
  centerMode: false,
  variableWidth: true,
});


/*$('.thirdDiv').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
 console.log(nextSlide);
  console.log(slick.slideCount);
  console.log(slick.options.slidesToShow);
  if (nextSlide > slick.slideCount - slick.options.slidesToShow) {
    event.preventDefault();
  }
});*/
$('.thirdDiv').on('afterChange edge', function(event, slick) {
  const $track = $(slick.$slideTrack);
  const trackWidth = $track.width();
  const $list = $(slick.$list);
  const listWidth = $list.width();
  const trackLeft = $track.position().left;
console.log(listWidth);
  if (trackWidth + trackLeft < listWidth) {
    slick.slickGoTo(slick.slideCount - 2);
  }
});