Slick Carousel

A slideshow component for cycling through elements—images or slides of text—like a carousel.

How to use?

Copy-paste the stylesheet <link> into your <head> to load the CSS.

<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">

Copy-paste the following <script>s near the end of your pages under JS Implementing Plugins to enable them.

<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>

Copy-paste the following <script> near the end of your pages under JS Front to enable it.

<script src="../../assets/js/hs.slick-carousel.js"></script>

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

<script>
  $(document).on('ready', function () {
    // initialization of slick carousel
    $('.js-slick-carousel').each(function() {
      var slickCarousel = $.HSCore.components.HSSlickCarousel.init($(this));
    });
  });
</script>

<div class="js-slick-carousel slick">
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-5">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-5">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-5">
    </div>
  </div>
</div>

Text slides only

Preview
HTML

First text slide

<div class="js-slick-carousel slick">
  <div class="js-slide" style="background-color: #b1bbc4;">
    <div class="space-3 text-center">
      <h3 class="h1">First text slide</h3>
    </div>
  </div>
  <div class="js-slide" style="background-color: #97a4af;">
    <div class="space-3 text-center">
      <h3 class="h1">Second text slide</h3>
    </div>
  </div>
  <div class="js-slide" style="background-color: #77838f;">
    <div class="space-3 text-center">
      <h3 class="h1">Third text slide</h3>
    </div>
  </div>
</div>

With controls

Preview
HTML

<div class="js-slick-carousel slick"
     data-hs-slick-carousel-options='{
       "prevArrow": "<span class=\"fas fa-arrow-left d-none d-sm-inline-block slick-arrow slick-arrow-soft-white slick-arrow-left slick-arrow-centered-y rounded-circle ml-sm-2 ml-xl-4\"></span>",
       "nextArrow": "<span class=\"fas fa-arrow-right d-none d-sm-inline-block slick-arrow slick-arrow-soft-white slick-arrow-right slick-arrow-centered-y rounded-circle mr-sm-2 mr-xl-4\",
         "responsive": [{
           "breakpoint": 768,
           "settings": {
             "arrows": false
           }
         }]></span>"
     }'>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-5">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-5">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-5">
    </div>
  </div>
</div>

With pagination

Preview
HTML

<div class="js-slick-carousel slick slick--pagination slick--pagination-white slick-pagination-bottom-center"
     data-hs-slick-carousel-options='{
       "dots": true
     }'>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-5">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-5">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-5">
    </div>
  </div>
</div>

With counter

Preview
HTML

1/3

<div class="position-relative">
  <div class="js-slick-carousel slick"
       data-hs-slick-carousel-options='{
         "counterSelector": "#slickCounter",
         "counterDivider": "/",
         "counterClassMap": {
           "current": "slick-counter-current",
           "total": "slick-counter-total",
           "divider": "slick-counter-divider"
         }
       }'>
    <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
      <div class="space-5">
      </div>
    </div>
    <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
      <div class="space-5">
      </div>
    </div>
    <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
      <div class="space-5">
      </div>
    </div>
  </div>

  <div class="container position-relative">
    <div id="slickCounter" class="slick-counter"></div>
  </div>
</div>

Autoplay

Preview
HTML

<div class="js-slick-carousel slick"
     data-hs-slick-carousel-options='{
       "autoplay": true,
       "autoplaySpeed": 5000
     }'>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-5">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-5">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-5">
    </div>
  </div>
</div>

Infinite

Preview
HTML

<div class="js-slick-carousel slick"
     data-hs-slick-carousel-options='{
       "infinite": true
     }'>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-5">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-5">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-5">
    </div>
  </div>
</div>

With rows

Preview
HTML

<div class="js-slick-carousel slick slick-gutters-1"
     data-hs-slick-carousel-options='{
       "rows": 2,
       "slidesToShow": 2
     }'>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-3">
    </div>
  </div>
</div>

With animation

Preview
HTML

First slide animation heading

First slide description

<div class="js-slick-carousel slick"
     data-hs-slick-carousel-options='{
       "prevArrow": "<span class=\"fas fa-arrow-left slick-arrow slick-arrow-soft-white slick-arrow-left slick-arrow-centered-y rounded-circle ml-sm-2 ml-xl-4\"></span>",
       "nextArrow": "<span class=\"fas fa-arrow-right slick-arrow slick-arrow-soft-white slick-arrow-right slick-arrow-centered-y rounded-circle mr-sm-2 mr-xl-4\"></span>",
       "autoplay": true,
       "autoplaySpeed": 5000,
       "infinite": true,
       "responsive": [{
         "breakpoint": 768,
         "settings": {
           "arrows": false
         }
       }]
     }'>
    <div class="text-center space-3">
      <h2 class="text-white mb-2"
          data-hs-slick-carousel-animation="fadeInUp">
        First slide animation heading
      </h2>

      <p class="text-white"
         data-hs-slick-carousel-animation="fadeInUp"
         data-hs-slick-carousel-animation-delay="200">First slide description</p>
    </div>
  </div>

  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="text-center space-3">
      <h2 class="text-white mb-2"
          data-hs-slick-carousel-animation="fadeInUp">
        Second slide animation heading
      </h2>

      <p class="text-white"
         data-hs-slick-carousel-animation="fadeInUp"
         data-hs-slick-carousel-animation-delay="200">Second slide description</p>
    </div>
  </div>

  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="text-center space-3">
      <h2 class="text-white mb-2"
          data-hs-slick-carousel-animation="fadeInUp">
        Three slide animation heading
      </h2>

      <p class="text-white"
         data-hs-slick-carousel-animation="fadeInUp"
         data-hs-slick-carousel-animation-delay="200">Three slide description</p>
    </div>
  </div>
</div>

Crossfade

Preview
HTML

<div class="js-slick-carousel slick"
     data-hs-slick-carousel-options='{
       "prevArrow": "<span class=\"fas fa-arrow-left slick-arrow slick-arrow-soft-white slick-arrow-left slick-arrow-centered-y rounded-circle ml-sm-2 ml-xl-4\"></span>",
       "nextArrow": "<span class=\"fas fa-arrow-right slick-arrow slick-arrow-soft-white slick-arrow-right slick-arrow-centered-y rounded-circle mr-sm-2 mr-xl-4\"></span>",
       "fade": true,
       "infinite": true,
       "responsive": [{
         "breakpoint": 768,
         "settings": {
           "arrows": false
         }
       }]
     }'>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-5">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-5">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-5">
    </div>
  </div>
</div>

Vertical

Preview
HTML

<div class="position-relative">
  <div class="js-slick-carousel slick"
       class="js-slick-carousel slick slick--pagination slick--pagination-white slick-pagination-vertical slick-pagination--right-center"
         data-hs-slick-carousel-options='{
           "vertical": true,
           "verticalSwiping": true,
           "dots": true
         }'>
    <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
      <div class="space-5">
      </div>
    </div>
    <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
      <div class="space-5">
      </div>
    </div>
    <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
      <div class="space-5">
      </div>
    </div>
  </div>
</div>

Multiple items

Preview
HTML

<div class="js-slick-carousel slick slick-gutters-1"
     data-hs-slick-carousel-options='{
       "prevArrow": "<span class=\"fas fa-arrow-left slick-arrow slick-arrow-soft-white slick-arrow-left slick-arrow-centered-y rounded-circle ml-sm-2 ml-xl-4\"></span>",
       "nextArrow": "<span class=\"fas fa-arrow-right slick-arrow slick-arrow-soft-white slick-arrow-right slick-arrow-centered-y rounded-circle mr-sm-2 mr-xl-4\"></span>",
       "slidesToShow": 3,
       "responsive": [{
         "breakpoint": 768,
         "settings": {
           "arrows": false
         }
       }]
     }'>
    <div class="space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-3">
    </div>
  </div>
</div>

Multiple scroll

Preview
HTML

<div class="js-slick-carousel slick slick-gutters-1"
     data-hs-slick-carousel-options='{
       "prevArrow": "<span class=\"fas fa-arrow-left slick-arrow slick-arrow-soft-white slick-arrow-left slick-arrow-centered-y rounded-circle ml-sm-2 ml-xl-4\"></span>",
       "nextArrow": "<span class=\"fas fa-arrow-right slick-arrow slick-arrow-soft-white slick-arrow-right slick-arrow-centered-y rounded-circle mr-sm-2 mr-xl-4\"></span>",
       "slidesToShow": 3,
       "slidesToScroll": 3,
       "responsive": [{
         "breakpoint": 768,
         "settings": {
           "arrows": false
         }
       }]
     }'>
    <div class="space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-3">
    </div>
  </div>
</div>

Variable width

Preview
HTML

200

250

300

<div class="js-slick-carousel slick slick-gutters-1"
     data-hs-slick-carousel-options='{
       "prevArrow": "<span class=\"fas fa-arrow-left slick-arrow slick-arrow-soft-white slick-arrow-left slick-arrow-centered-y rounded-circle ml-sm-2 ml-xl-4\"></span>",
       "nextArrow": "<span class=\"fas fa-arrow-right slick-arrow slick-arrow-soft-white slick-arrow-right slick-arrow-centered-y rounded-circle mr-sm-2 mr-xl-4\"></span>",
       "slidesToShow": 3,
       "variableWidth": true,
       "infinite": true,
       "responsive": [{
         "breakpoint": 992,
           "settings": {
             "slidesToShow": 2
           }
         }, {
         "breakpoint": 768,
         "settings": {
           "slidesToShow": 1
         }
       }]
     }'>
  <div class="js-slide" style="width: 200px; background-color: #b1bbc4;">
    <div class="text-center space-3">
      <h4>200</h4>
    </div>
  </div>
  <div class="js-slide" style="width: 250px; background-color: #97a4af;">
    <div class="text-center space-3">
      <h4>250</h4>
    </div>
  </div>
  <div class="js-slide" style="width: 300px; background-color: #77838f;">
    <div class="text-center space-3">
      <h4>300</h4>
    </div>
  </div>
  <div class="js-slide" style="width: 170px; background-color: #8c98a4;">
    <div class="text-center space-3">
      <h4>170</h4>
    </div>
  </div>
  <div class="js-slide" style="width: 280px; background-color: #5a5f69;">
    <div class="text-center space-3">
      <h4>280</h4>
    </div>
  </div>
  <div class="js-slide" style="width: 280px; background-color: #828286;">
    <div class="text-center space-3">
      <h4>280</h4>
    </div>
  </div>
</div>

Adaptive height

Preview
HTML

Slide heading

<div class="js-slick-carousel slick slick-gutters-1"
     data-hs-slick-carousel-options='{
       "prevArrow": "<span class=\"fas fa-arrow-left slick-arrow slick-arrow-soft-white slick-arrow-left slick-arrow-centered-y rounded-circle ml-sm-2 ml-xl-4\"></span>",
       "nextArrow": "<span class=\"fas fa-arrow-right slick-arrow slick-arrow-soft-white slick-arrow-right slick-arrow-centered-y rounded-circle mr-sm-2 mr-xl-4\"></span>",
       "adaptiveHeight": true,
       "responsive": [{
         "breakpoint": 992,
           "settings": {
             "slidesToShow": 2
           }
         }, {
         "breakpoint": 768,
         "settings": {
           "slidesToShow": 1
         }
       }]
     }'>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="text-center space-3">
      <h4 class="text-white">Slide heading</h4>
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="text-center space-3">
      <h4 class="text-white">Slide heading</h4>
      <p class="text-white mb-0">Slide text</p>
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="text-center space-3">
      <h4 class="text-white">Slide heading</h4>
      <p class="text-white mb-0">Slide text</p>
      <p class="text-white mb-0">and some more text...</p>
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="text-center space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="text-center space-3">
      <h4 class="text-white">Slide heading</h4>
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="text-center space-3">
      <h4 class="text-white">Slide heading</h4>
      <p class="text-white mb-0">Slide text</p>
      <p class="text-white mb-0">and some more text...</p>
    </div>
  </div>
</div>

Responsive display

Preview
HTML

<div class="js-slick-carousel slick slick-gutters-1"
     data-hs-slick-carousel-options='{
       "prevArrow": "<span class=\"fas fa-arrow-left slick-arrow slick-arrow-soft-white slick-arrow-left slick-arrow-centered-y rounded-circle ml-sm-2 ml-xl-4\"></span>",
       "nextArrow": "<span class=\"fas fa-arrow-right slick-arrow slick-arrow-soft-white slick-arrow-right slick-arrow-centered-y rounded-circle mr-sm-2 mr-xl-4\"></span>",
       "slidesToShow": 3,
       "responsive": [{
         "breakpoint": 992,
           "settings": {
             "slidesToShow": 2
           }
         }, {
         "breakpoint": 768,
         "settings": {
           "slidesToShow": 1
         }
       }]
     }'>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="text-center space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="text-center space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="text-center space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="text-center space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="text-center space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="text-center space-3">
    </div>
  </div>
</div>

Center mode

Preview
HTML

<div class="js-slick-carousel slick slick-gutters-1"
     data-hs-slick-carousel-options='{
       "prevArrow": "<span class=\"fas fa-arrow-left slick-arrow slick-arrow-soft-white slick-arrow-left slick-arrow-centered-y rounded-circle ml-sm-2 ml-xl-4\"></span>",
       "nextArrow": "<span class=\"fas fa-arrow-right slick-arrow slick-arrow-soft-white slick-arrow-right slick-arrow-centered-y rounded-circle mr-sm-2 mr-xl-4\"></span>",
       "infinite": true,
       "centerMode": true,
       "centerPadding": "150px",
       "responsive": [{
         "breakpoint": 992,
         "settings": {
           "centerPadding": "120px"
         },
         "breakpoint": 768,
         "settings": {
           "centerPadding": "80px"
         },
         "breakpoint": 554,
         "settings": {
           "centerPadding": "50px"
         }
       }]
     }'>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="text-center space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="text-center space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="text-center space-3">
    </div>
  </div>
</div>

Center slides

Preview
HTML

<div class="js-slick-carousel slick slick-gutters-1"
     data-hs-slick-carousel-options='{
       "prevArrow": "<span class=\"fas fa-arrow-left slick-arrow slick-arrow-soft-white slick-arrow-left slick-arrow-centered-y rounded-circle ml-sm-2 ml-xl-4\"></span>",
       "nextArrow": "<span class=\"fas fa-arrow-right slick-arrow slick-arrow-soft-white slick-arrow-right slick-arrow-centered-y rounded-circle mr-sm-2 mr-xl-4\"></span>",
       "centerMode": true,
       "slidesToShow": 2
     }'>
    <div class="space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-3">
    </div>
  </div>
</div>

Slider syncing

Preview
HTML

<div id="sliderSyncingNav" class="js-slick-carousel slick mb-2"
     data-hs-slick-carousel-options='{
       "prevArrow": "<span class=\"fas fa-arrow-left slick-arrow slick-arrow-soft-white slick-arrow-left slick-arrow-centered-y rounded-circle ml-sm-2 ml-xl-4\"></span>",
       "nextArrow": "<span class=\"fas fa-arrow-right slick-arrow slick-arrow-soft-white slick-arrow-right slick-arrow-centered-y rounded-circle mr-sm-2 mr-xl-4\"></span>",
       "infinite": true,
       "asNavFor": "#sliderSyncingThumb"
     }'>
  <div class="js-slide">
    <img class="img-fluid" src="..." alt="Image Description">
  </div>
  <div class="js-slide">
    <img class="img-fluid" src="..." alt="Image Description">
  </div>
  <div class="js-slide">
    <img class="img-fluid" src="..." alt="Image Description">
  </div>
</div>

<div id="sliderSyncingThumb" class="js-slick-carousel slick slick-gutters-1 slick-transform-off"
     data-hs-slick-carousel-options='{
       "infinite": true,
       "slidesToShow": 3,
       "isThumbs": true,
       "asNavFor": "#sliderSyncingNav",
       "responsive": [{
         "breakpoint": 992,
         "settings": {
           "slidesToShow": 2
         },
         "breakpoint": 768,
         "settings": {
           "slidesToShow": 1
         }
       }]
     }'>
  <div class="js-slide" style="cursor: pointer;">
    <img class="img-fluid" src="..." alt="Image Description">
  </div>
  <div class="js-slide" style="cursor: pointer;">
    <img class="img-fluid" src="..." alt="Image Description">
  </div>
  <div class="js-slide" style="cursor: pointer;">
    <img class="img-fluid" src="..." alt="Image Description">
  </div>
</div>

Circle thumb progress

Preview
HTML

<div id="thumbProgress" class="js-slick-carousel slick mb-3"
     data-hs-slick-carousel-options='{
       "prevArrow": "<span class=\"fas fa-arrow-left slick-arrow slick-arrow-soft-white slick-arrow-left slick-arrow-centered-y rounded-circle ml-sm-2 ml-xl-4\"></span>",
       "nextArrow": "<span class=\"fas fa-arrow-right slick-arrow slick-arrow-soft-white slick-arrow-right slick-arrow-centered-y rounded-circle mr-sm-2 mr-xl-4\"></span>",
       "fade": true,
       "infinite": true,
       "autoplaySpeed": 7000,
       "asNavFor": "#thumbProgressNav"
     }'>
  <div class="js-slide">
    <img class="img-fluid w-100" src="..." alt="Image Description">
  </div>
  <div class="js-slide">
    <img class="img-fluid w-100" src="..." alt="Image Description">
  </div>
  <div class="js-slide">
    <img class="img-fluid w-100" src="..." alt="Image Description">
  </div>
  <div class="js-slide">
    <img class="img-fluid w-100" src="..." alt="Image Description">
  </div>
  <div class="js-slide">
    <img class="img-fluid w-100" src="..." alt="Image Description">
  </div>
</div>

<div id="thumbProgressNav" class="js-slick-carousel slick slick-transform-off max-w-27rem mx-auto"
     data-hs-slick-carousel-options='{
       "infinite": true,
       "autoplaySpeed": 7000,
       "slidesToShow": 3,
       "isThumbs": true,
       "isThumbsProgressCircle": true,
       "thumbsProgressOptions": {
         "color": "#377dff",
         "width": 8
       },
       "thumbsProgressContainer": ".js-slick-thumb-progress",
       "asNavFor": "#thumbProgress"
     }'>
  <div class="js-slide p-1">
    <a class="js-slick-thumb-progress position-relative d-block avatar border rounded-circle p-1" href="javascript:;">
      <img class="img-fluid rounded-circle" src="../assets/img/img16.jpg" alt="Image Description">
    </a>
  </div>
  <div class="js-slide p-1">
    <a class="js-slick-thumb-progress position-relative d-block avatar border rounded-circle p-1" href="javascript:;">
      <img class="img-fluid rounded-circle" src="../assets/img/img17.jpg" alt="Image Description">
    </a>
  </div>
  <div class="js-slide p-1">
    <a class="js-slick-thumb-progress position-relative d-block avatar border rounded-circle p-1" href="javascript:;">
      <img class="img-fluid rounded-circle" src="../assets/img/img18.jpg" alt="Image Description">
    </a>
  </div>
</div>

Line thumb progress

Preview
HTML

<div class="js-slick-carousel slick"
     data-hs-slick-carousel-options='{
       "fade": true,
       "infinite": true,
       "autoplay": true,
       "autoplaySpeed": 7000,
       "dots": true,
       "dotsAsProgressLine": true,
       "dotsClass": "slick-dots mt-n4"
     }'>
  <div class="js-slide">
    <img class="img-fluid w-100" src="..." alt="Image Description">
  </div>
  <div class="js-slide">
    <img class="img-fluid w-100" src="..." alt="Image Description">
  </div>
  <div class="js-slide">
    <img class="img-fluid w-100" src="..." alt="Image Description">
  </div>
</div>

No transition

Preview
HTML

<div id="sliderSyncingNav" class="js-slick-carousel slick mb-2"
     data-hs-slick-carousel-options='{
       "infinite": true,
       "isThumbs": true,
       "asNavFor": "#sliderSyncingThumbNoTransition"
     }'>
  <div class="js-slide">
    <img class="img-fluid" src="..." alt="Image Description">
  </div>
  <div class="js-slide">
    <img class="img-fluid" src="..." alt="Image Description">
  </div>
  <div class="js-slide">
    <img class="img-fluid" src="..." alt="Image Description">
  </div>
</div>

<div id="sliderSyncingThumb" class="js-slick-carousel slick slick-gutters-1 slick-transform-off"
     data-hs-slick-carousel-options='{
       "infinite": true,
       "slidesToShow": 3,
       "isThumbs": true,
       "asNavFor": "#sliderSyncingNavNoTransition",
       "responsive": [{
         "breakpoint": 992,
         "settings": {
           "slidesToShow": 2
         },
         "breakpoint": 768,
         "settings": {
           "slidesToShow": 1
         }
       }]
     }'>
  <div class="js-slide" style="cursor: pointer;">
    <img class="img-fluid" src="..." alt="Image Description">
  </div>
  <div class="js-slide" style="cursor: pointer;">
    <img class="img-fluid" src="..." alt="Image Description">
  </div>
  <div class="js-slide" style="cursor: pointer;">
    <img class="img-fluid" src="..." alt="Image Description">
  </div>
</div>

Draggable

Disabled mouse dragging example.

Preview
HTML

<div class="js-slick-carousel slick"
     data-hs-slick-carousel-options='{
       "prevArrow": "<span class=\"fas fa-arrow-left slick-arrow slick-arrow-soft-white slick-arrow-left slick-arrow-centered-y rounded-circle ml-sm-2 ml-xl-4\"></span>",
       "nextArrow": "<span class=\"fas fa-arrow-right slick-arrow slick-arrow-soft-white slick-arrow-right slick-arrow-centered-y rounded-circle mr-sm-2 mr-xl-4\"></span>",
       "draggable": false
     }'>
  <div class="js-slide">
    <img class="img-fluid" src="..." alt="Image Description">
  </div>
  <div class="js-slide">
    <img class="img-fluid" src="..." alt="Image Description">
  </div>
  <div class="js-slide">
    <img class="img-fluid" src="..." alt="Image Description">
  </div>
</div>

Swipe

Disabled swiping example.

Preview
HTML

<div class="js-slick-carousel slick mb-2"
     data-hs-slick-carousel-options='{
       "prevArrow": "<span class=\"fas fa-arrow-left slick-arrow slick-arrow-soft-white slick-arrow-left slick-arrow-centered-y rounded-circle ml-sm-2 ml-xl-4\"></span>",
       "nextArrow": "<span class=\"fas fa-arrow-right slick-arrow slick-arrow-soft-white slick-arrow-right slick-arrow-centered-y rounded-circle mr-sm-2 mr-xl-4\"></span>",
       "swipe": false
     }'>
  <div class="js-slide">
    <img class="img-fluid" src="..." alt="Image Description">
  </div>
  <div class="js-slide">
    <img class="img-fluid" src="..." alt="Image Description">
  </div>
  <div class="js-slide">
    <img class="img-fluid" src="..." alt="Image Description">
  </div>
</div>

Touch move

Disabled slide motion with touch example.

Preview
HTML

<div class="js-slick-carousel slick mb-2"
     data-hs-slick-carousel-options='{
       "prevArrow": "<span class=\"fas fa-arrow-left slick-arrow slick-arrow-soft-white slick-arrow-left slick-arrow-centered-y rounded-circle ml-sm-2 ml-xl-4\"></span>",
       "nextArrow": "<span class=\"fas fa-arrow-right slick-arrow slick-arrow-soft-white slick-arrow-right slick-arrow-centered-y rounded-circle mr-sm-2 mr-xl-4\"></span>",
       "touchMove": false
     }'>
  <div class="js-slide">
    <img class="img-fluid" src="..." alt="Image Description">
  </div>
  <div class="js-slide">
    <img class="img-fluid" src="..." alt="Image Description">
  </div>
  <div class="js-slide">
    <img class="img-fluid" src="..." alt="Image Description">
  </div>
</div>

Right-to-left (RTL)

Preview
HTML

<div class="js-slick-carousel slick" dir="rtl"
     data-hs-slick-carousel-options='{
       "prevArrow": "<span class=\"fas fa-arrow-left slick-arrow slick-arrow-soft-white slick-arrow-left slick-arrow-centered-y rounded-circle ml-sm-2 ml-xl-4\"></span>",
       "nextArrow": "<span class=\"fas fa-arrow-right slick-arrow slick-arrow-soft-white slick-arrow-right slick-arrow-centered-y rounded-circle mr-sm-2 mr-xl-4\"></span>",
       "rtl": true
     }'>
    <div class="space-5">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-5">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-5">
    </div>
  </div>
</div>

Arrows

.slick-arrow-centered-y class provides vertical center alignment for arrow classes.

.slick-arrow class provides primary air style icon buttons.

In addition, .slick-arrow-offset class can be added to offset left and right arrows out of the container for only large and above devices.

Preview
HTML

<div
     data-hs-slick-carousel-options='{
       "prevArrow": "<span class=\"fas fa-arrow-left slick-arrow slick-arrow-left slick-arrow-centered-y rounded-circle ml-sm-2 ml-xl-4\"></span>",
       "nextArrow": "<span class=\"fas fa-arrow-right slick-arrow slick-arrow-right slick-arrow-centered-y rounded-circle mr-sm-2 mr-xl-4\"></span>"
     }'>
</div>

.slick-arrow-primary to apply primary style arrows.

Preview
HTML

<div
     data-hs-slick-carousel-options='{
       "prevArrow": "<span class=\"fas fa-arrow-left slick-arrow slick-arrow-primary slick-arrow-left slick-arrow-centered-y rounded-circle ml-sm-2 ml-xl-4\"></span>",
       "nextArrow": "<span class=\"fas fa-arrow-right slick-arrow slick-arrow-primary slick-arrow-right slick-arrow-centered-y rounded-circle mr-sm-2 mr-xl-4\"></span>"
     }'>
</div>

.slick-arrow slick-arrow-soft-white class provides white air style icon buttons.

Preview
HTML

<div
     data-hs-slick-carousel-options='{
       "prevArrow": "<span class=\"fas fa-arrow-left slick-arrow slick-arrow-soft-white slick-arrow-left slick-arrow-centered-y rounded-circle ml-sm-2 ml-xl-4\"></span>",
       "nextArrow": "<span class=\"fas fa-arrow-right slick-arrow slick-arrow-soft-white slick-arrow-right slick-arrow-centered-y rounded-circle mr-sm-2 mr-xl-4\"></span>"
     }'>
</div>

Paginations

.slick-pagination default style.

Preview
HTML

<div class="js-slick-carousel slick"
     data-hs-slick-carousel-options='{
       "dots": true,
       "dotsClass": "slick-pagination mt-3"
     }'>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-5">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-5">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-5">
    </div>
  </div>
</div>

.slick-pagination-white white style.

Preview
HTML

<div class="js-slick-carousel slick"
     data-hs-slick-carousel-options='{
       "dots": true,
       "dotsClass": "slick-pagination slick-pagination-white position-absolute bottom-0 right-0 left-0 mb-3"
     }'>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-5">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-5">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-5">
    </div>
  </div>
</div>

.slick-pagination-vertical turned horizontally positioned style into vertically.

Preview
HTML

<div class="js-slick-carousel slick"
     data-hs-slick-carousel-options='{
       "vertical": true,
       "verticalSwiping": true,
       "dots": true,
       "dotsClass": "slick-pagination slick-pagination-white slick-pagination-vertical position-absolute bottom-0 right-0 mb-3 mr-3"
     }'>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-5">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-5">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="space-5">
    </div>
  </div>
</div>

.slick-pagination-modern is another pagination style that provides a modern look.

Preview
HTML

<div id="paginationModernNav" class="js-slick-carousel slick mb-2"
     data-hs-slick-carousel-options='{
       "infinite": true,
       "autoplay": true,
       "autoplaySpeed": 5000,
       "fade": true,
       "asNavFor": "#paginationModernThumb"
     }'>
  <div class="js-slide">
    <img class="img-fluid" src="..." alt="Image Description">
  </div>
  <div class="js-slide">
    <img class="img-fluid" src="..." alt="Image Description">
  </div>
  <div class="js-slide">
    <img class="img-fluid" src="..." alt="Image Description">
  </div>
</div>

<div id="paginationModernThumb" class="js-slick-carousel slick slick-pagination-modern slick-transform-off mx-auto"
     data-hs-slick-carousel-options='{
       "infinite": true,
       "centerMode": true,
       "slidesToShow": 3,
       "isThumbs": true,
       "asNavFor": "#paginationModernNav"
     }'>
  <div class="js-slide">
    <img class="avatar avatar-circle mx-auto" src="..." alt="Image Description">
  </div>
  <div class="js-slide">
    <img class="avatar avatar-circle mx-auto" src="..." alt="Image Description">
  </div>
  <div class="js-slide">
    <img class="avatar avatar-circle mx-auto" src="..." alt="Image Description">
  </div>
</div>

.slick-pagination-interactive with avatars and names in it

Preview
HTML

I followed a link for a job on Front and uploaded my resume. About two hours later, I received an email from an employer looking for someone with my skills. In a week's time and four interviews later I have a fantastic new job! Thanks Front!

<!-- Slick Carousel - Main Nav -->
<div id="testimonialsNavMain" class="js-slick-carousel slick text-center w-lg-75 mx-lg-auto mb-7"
     data-hs-slick-carousel-options='{
       "adaptiveHeight": true,
       "fade": true,
       "infinite": true,
       "asNavFor": "#testimonialsNavPagination"
     }'>
  <div class="js-slide">
    <!-- Testimonials -->
    <blockquote class="lead text-white-70 text-lh-lg">
      I followed a link for a job on Front and uploaded my resume. About two hours later, I received an email from an employer looking for someone with my skills. In a week's time and four interviews later I have a fantastic new job! Thanks Front!</blockquote>
    <!-- End Testimonials -->
  </div>

  <div class="js-slide">
    <!-- Testimonials -->
    <blockquote class="lead text-white-70 text-lh-lg">
      I had my resume public on Front for only two days and I got flooded with interviews from serious competitive employers that resulted in me choosing between very tempting offers. Don't waste your time. Go Front. It's real!</blockquote>
    <!-- End Testimonials -->
  </div>

  <div class="js-slide">
    <!-- Testimonials -->
    <blockquote class="lead text-white-70 text-lh-lg">
      I found my current Job on Front. I applied and got a reply from the company within one day. Hired within the week. No other job site has as many tech jobs as Front.</blockquote>
    <!-- End Testimonials -->
  </div>

  <div class="js-slide">
    <!-- Testimonials -->
    <blockquote class="lead text-white-70 text-lh-lg">
      I uploaded my resume on Front and within that week had several emails and calls about opportunities from recruiters. I decided to pursue an opportunity with HP and started working there that same month. Excellent site!</blockquote>
    <!-- End Testimonials -->
  </div>
</div>
<!-- End Slick Carousel - Main Nav -->

<!-- Slick Carousel - Pagination Nav -->
<div id="testimonialsNavPagination" class="js-slick-carousel slick slick-gutters-3 slick-pagination-interactive"
     data-hs-slick-carousel-options='{
       "infinite": true,
       "slidesToShow": 3,
       "centerMode": true,
       "isThumbs": true,
       "asNavFor": "#testimonialsNavMain",
       "responsive": [{
         "breakpoint": 992,
         "settings": {
           "slidesToShow": 2
         },
         "breakpoint": 768,
         "settings": {
           "slidesToShow": 1
         }
       }]
     }'>
  <div class="js-slide rounded-pill p-2">
    <!-- Authors -->
    <div class="media align-items-center">
      <div class="avatar avatar-circle mr-3">
        <img class="avatar-img" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
      </div>
      <div class="media-body">
        <h4 class="slick-pagination-interactive-title mb-0">Casy Williams</h4>
        <p class="small slick-pagination-interactive-text mb-0">NERC CIP Consultant</p>
      </div>
    </div>
    <!-- End Authors -->
  </div>
  <div class="js-slide rounded-pill p-2">
    <!-- Authors -->
    <div class="media align-items-center">
      <div class="avatar avatar-circle mr-3">
        <img class="avatar-img" src="../../assets/img/100x100/img3.jpg" alt="Image Description">
      </div>
      <div class="media-body">
        <h4 class="slick-pagination-interactive-title mb-0">Elon Fisher</h4>
        <p class="small slick-pagination-interactive-text mb-0">Consultant</p>
      </div>
    </div>
    <!-- End Authors -->
  </div>
  <div class="js-slide rounded-pill p-2">
    <!-- Authors -->
    <div class="media align-items-center">
      <div class="avatar avatar-circle mr-3">
        <img class="avatar-img" src="../../assets/img/100x100/img2.jpg" alt="Image Description">
      </div>
      <div class="media-body">
        <h4 class="slick-pagination-interactive-title mb-0">Linda Spears</h4>
        <p class="small slick-pagination-interactive-text mb-0">Business Analyst</p>
      </div>
    </div>
    <!-- End Authors -->
  </div>
  <div class="js-slide rounded-pill p-2">
    <!-- Authors -->
    <div class="media align-items-center">
      <div class="avatar avatar-circle mr-3">
        <img class="avatar-img" src="../../assets/img/100x100/img4.jpg" alt="Image Description">
      </div>
      <div class="media-body">
        <h4 class="slick-pagination-interactive-title mb-0">Chris Johnson</h4>
        <p class="small slick-pagination-interactive-text mb-0">Firewall Engineer</p>
      </div>
    </div>
    <!-- End Authors -->
  </div>
</div>
<!-- End Slick Carousel - Pagination Nav -->

.slick-pagination-line with progress bar

Preview
HTML

First slide

Second slide

Third slide

<div class="position-relative">
  <!-- Main Slider -->
  <div id="heroSlider" class="js-slick-carousel slick"
       data-hs-slick-carousel-options='{
       "vertical": true,
       "verticalSwiping": true,
       "infinite": true,
       "autoplay": true,
       "autoplaySpeed": 10000,
       "dots": true,
       "dotsClass": "slick-pagination slick-pagination-white slick-pagination-vertical d-lg-none position-absolute bottom-0 right-0 mb-3 mr-3",
       "asNavFor": "#heroSliderNav"
     }'>

    <div class="js-slide d-flex gradient-x-overlay-sm-navy bg-img-hero min-h-620rem" style="background-image: url(...);">
      <div class="container d-flex align-items-center min-h-620rem">
        <div class="w-lg-40 mr-5">
          <h3 class="text-white">First slide</h3>
        </div>
      </div>
    </div>

    <div class="js-slide d-flex gradient-x-overlay-sm-navy bg-img-hero min-h-620rem" style="background-image: url(...);">
      <div class="container d-flex align-items-center min-h-620rem">
        <div class="w-lg-40 mr-5">
          <h3 class="text-white">Second slide</h3>
        </div>
      </div>
    </div>

    <div class="js-slide d-flex gradient-x-overlay-sm-navy bg-img-hero min-h-620rem" style="background-image: url(...);">
      <div class="container d-flex align-items-center min-h-620rem">
        <div class="w-lg-40 mr-5">
          <h3 class="text-white">Third slide</h3>
        </div>
      </div>
    </div>
  </div>
  <!-- End Main Slider -->

  <!-- Slider Nav -->
  <div class="container slick-pagination-line-wrapper content-centered-y right-0 left-0">
    <div class="content-centered-y right-0 mr-3">
      <div id="heroSliderNav" class="js-slick-carousel slick slick-pagination-line max-w-27rem ml-auto"
           data-hs-slick-carousel-options='{
           "vertical": true,
           "verticalSwiping": true,
           "infinite": true,
           "autoplay": true,
           "autoplaySpeed": 10000,
           "slidesToShow": 3,
           "isThumbs": true,
           "asNavFor": "#heroSlider"
         }'>
        <div class="js-slide my-3">
          <span class="text-white">First slide</span>

          <span class="slick-pagination-line-progress">
          <span class="slick-pagination-line-progress-helper"></span>
        </span>
        </div>
        <div class="js-slide my-3">
          <span class="text-white">Second slide</span>

          <span class="slick-pagination-line-progress">
          <span class="slick-pagination-line-progress-helper"></span>
        </span>
        </div>
        <div class="js-slide my-3">
          <span class="text-white">Third slide</span>

          <span class="slick-pagination-line-progress">
          <span class="slick-pagination-line-progress-helper"></span>
        </span>
        </div>
      </div>
    </div>
  </div>
  <!-- End Slider Nav -->
</div>

Equal height

With the use of .slick-equal-height class, turn your carousel contents into equal height blocks.

Preview
HTML

Slide heading

<div class="js-slick-carousel slick slick-equal-height slick-gutters-1"
     data-hs-slick-carousel-options='{
       "prevArrow": "<span class=\"fas fa-arrow-left slick-arrow slick-arrow-soft-white slick-arrow-left slick-arrow-centered-y rounded-circle ml-sm-2 ml-xl-4\"></span>",
       "nextArrow": "<span class=\"fas fa-arrow-right slick-arrow slick-arrow-soft-white slick-arrow-right slick-arrow-centered-y rounded-circle mr-sm-2 mr-xl-4\"></span>",
       "adaptiveHeight": true,
       "responsive": [{
         "breakpoint": 992,
           "settings": {
             "slidesToShow": 2
           }
         }, {
         "breakpoint": 768,
         "settings": {
           "slidesToShow": 1
         }
       }]
     }'>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="w-100 text-center space-3">
      <h4 class="text-white">Slide heading</h4>
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="w-100 text-center space-3">
      <h4 class="text-white">Slide heading</h4>
      <p class="text-white mb-0">Slide text</p>
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="w-100 text-center space-3">
      <h4 class="text-white">Slide heading</h4>
      <p class="text-white mb-0">Slide text</p>
      <p class="text-white mb-0">and some more text...</p>
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="w-100 text-center space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="w-100 text-center space-3">
      <h4 class="text-white">Slide heading</h4>
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(...);">
    <div class="w-100 text-center space-3">
      <h4 class="text-white">Slide heading</h4>
      <p class="text-white mb-0">Slide text</p>
      <p class="text-white mb-0">and some more text...</p>
    </div>
  </div>
</div>

Others

There are a couple of other predefined classes to make carousel contents easy to control and decorate them with some stylish design.

Class	Description
`slick-gutters-1`	Adds `4px` spacing between slides.
`slick-gutters-2`	Adds `8px` spacing between slides.
`slick-gutters-3`	Adds `15px` spacing between slides.

SCSS

SCSS-files of the component can be found here assets/scss/front/vendor/slick/ and her ../../assets/scss/front/slick/

Extend

By assigning a variable, you can call the standard methods of the plugin:

<script>
  $(document).on('ready', function () {
    // initialization of slick carousel
    $('.js-slick-carousel').each(function() {
      var slickCarousel = $.HSCore.components.HSSlickCarousel.init($(this));

      console.log(slickCarousel.slick('slickCurrentSlide'));
    });
  });
</script>

Attributes

By assigning a variable, you can call the standard methods of the plugin:

data-hs-slick-carousel-options='{
   ...

   // Custom
   "initialDelay": 600,
   "isThumbs": true,
   "isThumbsProgress": false,
   "thumbsProgressContainer": "#ID",
   "thumbsProgressOptions": {
     "color": "#000",
     "width": 4
   },
   "animationIn": "fadeIn",
   "animationOut": "fadeOut",
   "dotsWithIcon": "<i class=\"far fa-dot-circle\"></i>",
   "dotsFromTitles": false,
   "hasDotsHelper": false,
   "counterSelector": "#ID",
   "counterDivider": " | ",
   "counterClassMap": {
     "current": "slick-counter-current",
     "total": "slick-counter-total",
     "divider": "slick-counter-divider"
   }
}' - array

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-slick-carousel-options='{}'. For more detailed or missing attributes/functions, see the official documentation page.

Parameters	Description	Default value
`initialDelay`	Sets a delay for autoplaying a slayer	`600`
`isThumbs`	If `true`, then is a preview for another carousel	`false`
`thumbsProgress`	If `true`, then generates additional markup simulating a progress circle	`false`
`thumbsProgressContainer`	If `true`, the selector to which additional markup will be generated when `isThumbsProgress` is `true`	`null`
`thumbsProgressOptions.color`	Color of the progress circle line	`-`
`thumbsProgressOptions.width`	Progress circle line width	`-`
`animationIn`	CSS appearing effect	`null`
`animationOut`	CSS disappearing effect	`null`
`dotsWithIcon`	Markup auxiliary icons for pagination bunkers	`null`
`dotsFromTitles`	If `true`, then adds the slide title inside the corresponding pagination dot	`null`
`hasDotsHelper`	If `true`, then inserts additional markup `<span class = "dots-helper"> </span>` into the bunkers	`false`
`counterSelector`	If `true`, a slide counter appears	`null`
`counterDivider`	Divider, which separates the index of the current slide and the total number of slides if `counterSelector` is `true`	`"/"`
`counterClassMap.current`	Class name for the element that displays the index of the current slide, if `counterSelector` is `true`	`-`
`counterClassMap.total`	Class name for the element displaying the total number of slides if `counterSelector` is `true`	`-`
`counterClassMap.divider`	Class name for the separator if `counterSelector` is `true`	`-`

Slick Carousel

How to use?

Examples

Image slides only

Text slides only

First text slide

With controls

With pagination

With counter

Autoplay

Infinite

With rows

With animation

First slide animation heading

Crossfade

Vertical

Multiple items

Multiple scroll

Variable width

200

250

300

Adaptive height

Slide heading

Responsive display

Center mode

Center slides

Slider syncing

Circle thumb progress

Line thumb progress

No transition

Draggable

Swipe

Touch move

Right-to-left (RTL)

Helpers

Arrows

Paginations

Chris Johnson

Casy Williams

Elon Fisher

First slide

Equal height

Slide heading

Others

SCSS

JavaScript behavior

Extend

Attributes

Methods