Swiper Slider

Slick Slider is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior For more details

File Structure
  • gulp+scss+hbs
    • src
      • assets
        • vendor
          • slick-slider
              • slick.min.css
              • slick.min.js 
<!-- swiper slider css-->
<script src="{{path}}assets/vendor/slick-slider/slick.min.css"></script>

<!-- swiper slider js-->
<script src="{{path}}assets/vendor/sslick-slider/slick.min.js"></script>
HTML Code
<div class="testimonial-thumbs1" data-thumb1-slide="3" data-tablet="2" data-mobile="2" data-mobile-sm="1"
    data-center="true">
    <div class="text-center justify-content-center d-flex">
        Thumbs-img-1
    </div>
    <div class="text-center justify-content-center d-flex">
        Thumbs-img-2
    </div>
    <div class="text-center justify-content-center d-flex">
        Thumbs-img-3
    </div>
    <div class="text-center justify-content-center d-flex">
        Thumbs-img-4
    </div>
    <div class="text-center justify-content-center d-flex">
        Thumbs-img-5
    </div>
    <div class="text-center justify-content-center d-flex">
        Thumbs-img-6
    </div>
</div>
<div class="testimonial-top">
    <div class="text-desc">
        slide1
    </div>
    <div class="text-desc">
        slide2
    </div>
    <div class="text-desc">
        slide3
    </div>
    <div class="text-desc">
        slide4
    </div>
    <div class="text-desc">
        slide5
    </div>
    <div class="text-desc">
        slide6
    </div>
</div>
<div class="testimonial-thumbs2" data-thumb2-slide="5" data-tablet="2" data-mobile="2" data-mobile-sm="1">
    <div class="slick-slide">
        Thumbs1
    </div>
    <div class="slick-slide">
        Thumbs2
    </div>
    <div class="slick-slide">
        Thumbs3
    </div>
    <div class="slick-slide">
        Thumbs4
    </div>
    <div class="slick-slide">
        Thumbs5
    </div>
    <div class="slick-slide">
        Thumbs6
    </div>
</div>
Script
(function (jQuery) {
  "use strict";

  jQuery(document).ready(function () {
    callTestimonialSlick();
  });
})(jQuery);

function callTestimonialSlick() {
  jQuery(".testimonial-thumbs1").each(function () {
    let thumbs1 = jQuery(this);
    jQuery(".testimonial-thumbs1").slick({
      slidesToShow: thumbs1.data("thumb1-slide"),
      slidesToScroll: 1,
      centerMode: thumbs1.data("center"),
      infinite: true,
      vertical: false,
      arrows: false,
      asNavFor: ".testimonial-top, .testimonial-thumbs2",
      focusOnSelect: true,
      draggable: true,
      responsive: [
        {
          breakpoint: 1024,
          settings: {
            vertical: false,
            centerMode: false,
            slidesToShow: thumbs1.data("tablet"),
          },
        },
        {
          breakpoint: 767,
          settings: {
            vertical: false,
            centerMode: false,
            slidesToShow: thumbs1.data("mobile"),
          },
        },
        {
          breakpoint: 479,
          settings: {
            vertical: false,
            slidesPerRow: 1,
            centerMode: false,
            slidesToShow: thumbs1.data("mobile-sm"),
          },
        },
      ],
    });
    });

  jQuery(".testimonial-thumbs2").each(function () {
    var thumbs2 = jQuery(this);
    jQuery(".testimonial-thumbs2").slick({
      slidesToShow: thumbs2.data("thumb2-slide"),
      slidesToScroll: 1,
      centerMode: true,
      arrows: false,
      dots: true,
      draggable: true,
      infinite: true,
      asNavFor: ".testimonial-top, .testimonial-thumbs1",
      focusOnSelect: true,
      responsive: [
        {
          breakpoint: 1024,
          settings: {
            vertical: false,
            centerMode: false,
            slidesToShow: thumbs2.data("tablet"),
          },
        },
        {
          breakpoint: 767,
          settings: {
            vertical: false,
            centerMode: false,
            slidesToShow: thumbs2.data("mobile"),
          },
        },
        {
          breakpoint: 479,
          settings: {
            vertical: false,
            slidesPerRow: 1,
            centerMode: false,
            slidesToShow: thumbs2.data("mobile-sm"),
          },
        },
      ],
    });
  });

  jQuery(".testimonial-top").each(function () {
    var jQuerycarousel = jQuery(this);
    jQuery(".testimonial-top").slick({
      autoplay: false,
      slidesPerRow: 1,
      slidesToShow: 1,
      asNavFor: ".testimonial-thumbs1, .testimonial-thumbs2",
      arrows: false,
      draggable: true,
      responsive: [
        {
          breakpoint: 767,
          settings: {
            vertical: false,
            fade: true,
          },
        },
      ],
    });
  });
}
Previous Source & Credits