Skip to main content

Slick Carousel

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

How it works

Space has taken the advantage of Slick carousel and extended it with dozens of new options. The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.

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

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

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

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

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
    $.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
  });
</script>
Copy

Examples

Image slides only 

<div class="js-slick-carousel u-slick">
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img24.jpg);">
    <div class="space-5">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img25.jpg);">
    <div class="space-5">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img26.jpg);">
    <div class="space-5">
    </div>
  </div>
</div>
Copy

Text slides only

First text slide

Second text slide

Third text slide

<div class="js-slick-carousel u-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>
Copy

With controls 

<div class="js-slick-carousel u-slick"
     data-arrows-classes="d-none d-lg-inline-block u-slick__arrow-classic u-slick__arrow-centered--y rounded-circle"
     data-arrow-left-classes="fa fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
     data-arrow-right-classes="fa fa-arrow-right u-slick__arrow-classic-inner u-slick__arrow-classic-inner--right mr-lg-2 mr-xl-4">
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img24.jpg);">
    <div class="space-5">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img25.jpg);">
    <div class="space-5">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img26.jpg);">
    <div class="space-5">
    </div>
  </div>
</div>
Copy

With pagination 

<div class="js-slick-carousel u-slick"
     data-arrows-classes="d-none d-lg-inline-block u-slick__arrow-classic u-slick__arrow-centered--y rounded-circle"
     data-arrow-left-classes="fa fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
     data-arrow-right-classes="fa fa-arrow-right u-slick__arrow-classic-inner u-slick__arrow-classic-inner--right mr-lg-2 mr-xl-4">
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img24.jpg);">
    <div class="space-5">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img25.jpg);">
    <div class="space-5">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img26.jpg);">
    <div class="space-5">
    </div>
  </div>
</div>
Copy

With numbered pagination 

<div class="position-relative">
  <div class="js-slick-carousel u-slick"
       data-numbered-pagination="#slickPaging">
    <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img24.jpg);">
      <div class="space-5">
      </div>
    </div>
    <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img25.jpg);">
      <div class="space-5">
      </div>
    </div>
    <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img26.jpg);">
      <div class="space-5">
      </div>
    </div>
  </div>

  <div class="container position-relative">
    <div id="slickPaging" class="u-slick__paging-v1"></div>
  </div>
</div>
Copy

Autoplay 

<div class="js-slick-carousel u-slick"
     data-autoplay="true"
     data-speed="5000">
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img24.jpg);">
    <div class="space-5">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img25.jpg);">
    <div class="space-5">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img26.jpg);">
    <div class="space-5">
    </div>
  </div>
</div>
Copy

Infinite 

<div class="js-slick-carousel u-slick"
     data-infinite="true">
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img24.jpg);">
    <div class="space-5">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img25.jpg);">
    <div class="space-5">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img26.jpg);">
    <div class="space-5">
    </div>
  </div>
</div>
Copy

With rows 

<div class="js-slick-carousel u-slick u-slick--gutters-1"
     data-slides-show="2"
     data-rows="2">
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img27.jpg);">
    <div class="space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img28.jpg);">
    <div class="space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img29.jpg);">
    <div class="space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img30.jpg);">
    <div class="space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img31.jpg);">
    <div class="space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img32.jpg);">
    <div class="space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img33.jpg);">
    <div class="space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img34.jpg);">
    <div class="space-3">
    </div>
  </div>
</div>
Copy

With animation

First slide animation heading

First slide description

Second slide animation heading

Second slide description

Three slide animation heading

Three slide description

<div class="js-slick-carousel u-slick"
     data-autoplay="true"
     data-speed="10000"
     data-infinite="true"
     data-arrows-classes="d-none d-lg-inline-block u-slick__arrow-classic u-slick__arrow-centered--y rounded-circle"
     data-arrow-left-classes="fa fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
     data-arrow-right-classes="fa fa-arrow-right u-slick__arrow-classic-inner u-slick__arrow-classic-inner--right mr-lg-2 mr-xl-4">
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img35.jpg);">
    <div class="text-center space-3">
      <h2 class="text-white font-weight-light mb-2"
          data-scs-animation-in="fadeInUp">
        First slide animation heading
      </h2>

      <p class="text-white"
         data-scs-animation-in="fadeInUp"
         data-scs-animation-delay="200">First slide description</p>
    </div>
  </div>

  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img35.jpg);">
    <div class="text-center space-3">
      <h2 class="text-white font-weight-light mb-2"
          data-scs-animation-in="fadeInUp">
        Second slide animation heading
      </h2>

      <p class="text-white"
         data-scs-animation-in="fadeInUp"
         data-scs-animation-delay="200">Second slide description</p>
    </div>
  </div>

  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img35.jpg);">
    <div class="text-center space-3">
      <h2 class="text-white font-weight-light mb-2"
          data-scs-animation-in="fadeInUp">
        Three slide animation heading
      </h2>

      <p class="text-white"
         data-scs-animation-in="fadeInUp"
         data-scs-animation-delay="200">Three slide description</p>
    </div>
  </div>
</div>
Copy

Crossfade 

<div class="js-slick-carousel u-slick"
     data-fade="true"
     data-arrows-classes="d-none d-lg-inline-block u-slick__arrow-classic u-slick__arrow-centered--y rounded-circle"
     data-arrow-left-classes="fa fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
     data-arrow-right-classes="fa fa-arrow-right u-slick__arrow-classic-inner u-slick__arrow-classic-inner--right mr-lg-2 mr-xl-4">
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img24.jpg);">
    <div class="space-5">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img25.jpg);">
    <div class="space-5">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img26.jpg);">
    <div class="space-5">
    </div>
  </div>
</div>
Copy

Vertical 

<div class="position-relative">
  <div class="js-slick-carousel u-slick"
       data-vertical="true"
       data-pagi-classes="position-absolute right-0 u-slick__pagination u-slick__pagination--block u-slick__pagination-centered--y u-slick__pagination--white mr-5">
    <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img24.jpg);">
      <div class="space-5">
      </div>
    </div>
    <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img25.jpg);">
      <div class="space-5">
      </div>
    </div>
    <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img26.jpg);">
      <div class="space-5">
      </div>
    </div>
  </div>
</div>
Copy

Multiple items 

<div class="js-slick-carousel u-slick u-slick--gutters-1"
     data-slides-show="3"
     data-arrows-classes="d-none d-lg-inline-block u-slick__arrow-classic u-slick__arrow-centered--y rounded-circle"
     data-arrow-left-classes="fa fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
     data-arrow-right-classes="fa fa-arrow-right u-slick__arrow-classic-inner u-slick__arrow-classic-inner--right mr-lg-2 mr-xl-4">
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img27.jpg);">
    <div class="space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img28.jpg);">
    <div class="space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img29.jpg);">
    <div class="space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img30.jpg);">
    <div class="space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img31.jpg);">
    <div class="space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img32.jpg);">
    <div class="space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img33.jpg);">
    <div class="space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img34.jpg);">
    <div class="space-3">
    </div>
  </div>
</div>
Copy

Variable width

200

250

300

170

280

280

<div class="js-slick-carousel u-slick u-slick--gutters-1"
     data-slides-show="3"
     data-slides-scroll="1"
     data-variable-width="true"
     data-infinite="true"
     data-arrows-classes="d-none d-lg-inline-block u-slick__arrow-classic u-slick__arrow-centered--y rounded-circle"
     data-arrow-left-classes="fa fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
     data-arrow-right-classes="fa fa-arrow-right u-slick__arrow-classic-inner u-slick__arrow-classic-inner--right mr-lg-2 mr-xl-4"
     data-responsive='[{
       "breakpoint": 992,
       "settings": {
         "slidesToShow": 2
       }
     }, {
       "breakpoint": 768,
       "settings": {
         "slidesToShow": 1
       }
     }, {
       "breakpoint": 554,
       "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>
Copy

Adaptive height

Slide heading

Slide heading

Slide text

Slide heading

Slide text

and some more text...

Slide heading

Slide heading

Slide text

and some more text...

<div class="js-slick-carousel u-slick u-slick--gutters-1"
     data-adaptive-height="true"
     data-arrows-classes="d-none d-lg-inline-block u-slick__arrow-classic u-slick__arrow-centered--y rounded-circle"
     data-arrow-left-classes="fa fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
     data-arrow-right-classes="fa fa-arrow-right u-slick__arrow-classic-inner u-slick__arrow-classic-inner--right mr-lg-2 mr-xl-4">
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img35.jpg);">
    <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(../assets/img/img35.jpg);">
    <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(../assets/img/img35.jpg);">
    <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(../assets/img/img35.jpg);">
    <div class="text-center space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img35.jpg);">
    <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(../assets/img/img35.jpg);">
    <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>
Copy

Responsive display 

<div class="js-slick-carousel u-slick u-slick--gutters-1"
     data-slides-show="3"
     data-slides-scroll="1"
     data-arrows-classes="d-none d-lg-inline-block u-slick__arrow-classic u-slick__arrow-centered--y rounded-circle"
     data-arrow-left-classes="fa fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
     data-arrow-right-classes="fa fa-arrow-right u-slick__arrow-classic-inner u-slick__arrow-classic-inner--right mr-lg-2 mr-xl-4"
     data-responsive='[{
       "breakpoint": 992,
       "settings": {
         "slidesToShow": 2
       }
     }, {
       "breakpoint": 768,
       "settings": {
         "slidesToShow": 1
       }
     }, {
       "breakpoint": 554,
       "settings": {
         "slidesToShow": 1
       }
     }]'>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img35.jpg);">
    <div class="text-center space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img35.jpg);">
    <div class="text-center space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img35.jpg);">
    <div class="text-center space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img35.jpg);">
    <div class="text-center space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img35.jpg);">
    <div class="text-center space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img35.jpg);">
    <div class="text-center space-3">
    </div>
  </div>
</div>
Copy

Center mode 

<div class="js-slick-carousel u-slick u-slick--gutters-1"
     data-infinite="true"
     data-slides-show="1"
     data-slides-scroll="1"
     data-center-mode="true"
     data-center-padding="150px"
     data-arrows-classes="d-none d-lg-inline-block u-slick__arrow-classic u-slick__arrow-centered--y rounded-circle"
     data-arrow-left-classes="fa fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
     data-arrow-right-classes="fa fa-arrow-right u-slick__arrow-classic-inner u-slick__arrow-classic-inner--right mr-lg-2 mr-xl-4"
     data-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(../assets/img/img24.jpg);">
    <div class="text-center space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img25.jpg);">
    <div class="text-center space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img26.jpg);">
    <div class="text-center space-3">
    </div>
  </div>
</div>
Copy

Center slides 

<div class="js-slick-carousel u-slick u-slick--gutters-1"
     data-slides-show="2"
     data-slides-scroll="1"
     data-center-mode="true"
     data-arrows-classes="d-none d-lg-inline-block u-slick__arrow u-slick__arrow-centered--y rounded-circle"
     data-arrow-left-classes="fa fa-arrow-left u-slick__arrow-inner u-slick__arrow-inner--left ml-lg-2 ml-xl-4"
     data-arrow-right-classes="fa fa-arrow-right u-slick__arrow-inner u-slick__arrow-inner--right mr-lg-2 mr-xl-4">
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img24.jpg);">
    <div class="space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img25.jpg);">
    <div class="space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img26.jpg);">
    <div class="space-3">
    </div>
  </div>
</div>
Copy

Slider syncing

Image Description
Image Description
Image Description
Image Description
Image Description 
<div id="sliderSyncingNav" class="js-slick-carousel u-slick mb-2"
     data-infinite="true"
     data-arrows-classes="d-none d-lg-inline-block u-slick__arrow-classic u-slick__arrow-centered--y rounded-circle"
     data-arrow-left-classes="fa fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
     data-arrow-right-classes="fa fa-arrow-right u-slick__arrow-classic-inner u-slick__arrow-classic-inner--right mr-lg-2 mr-xl-4"
     data-nav-for="#sliderSyncingThumb">
  <div class="js-slide">
    <img class="img-fluid" src="../assets/img/img24.jpg" alt="Image Description">
  </div>
  <div class="js-slide">
    <img class="img-fluid" src="../assets/img/img25.jpg" alt="Image Description">
  </div>
  <div class="js-slide">
    <img class="img-fluid" src="../assets/img/img26.jpg" alt="Image Description">
  </div>
</div>

<div id="sliderSyncingThumb" class="js-slick-carousel u-slick u-slick--gutters-1 u-slick--transform-off"
     data-infinite="true"
     data-slides-show="3"
     data-is-thumbs="true"
     data-nav-for="#sliderSyncingNav"
     data-responsive='[{
       "breakpoint": 992,
       "settings": {
         "slidesToShow": 2
       }
     }, {
       "breakpoint": 768,
       "settings": {
         "slidesToShow": 1
       }
     }, {
       "breakpoint": 554,
       "settings": {
         "slidesToShow": 1
       }
     }]'>
  <div class="js-slide" style="cursor: pointer;">
    <img class="img-fluid" src="../assets/img/img24.jpg" alt="Image Description">
  </div>
  <div class="js-slide" style="cursor: pointer;">
    <img class="img-fluid" src="../assets/img/img25.jpg" alt="Image Description">
  </div>
  <div class="js-slide" style="cursor: pointer;">
    <img class="img-fluid" src="../assets/img/img26.jpg" alt="Image Description">
  </div>
</div>
Copy

No transition

Image Description
Image Description
Image Description 
<div id="sliderSyncingNav" class="js-slick-carousel u-slick mb-2"
     data-infinite="true"
     data-arrows-classes="d-none d-lg-inline-block u-slick__arrow-classic u-slick__arrow-centered--y rounded-circle"
     data-arrow-left-classes="fa fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
     data-arrow-right-classes="fa fa-arrow-right u-slick__arrow-classic-inner u-slick__arrow-classic-inner--right mr-lg-2 mr-xl-4"
     data-nav-for="#sliderSyncingThumb">
  <div class="js-slide">
    <img class="img-fluid" src="../assets/img/img24.jpg" alt="Image Description">
  </div>
  <div class="js-slide">
    <img class="img-fluid" src="../assets/img/img25.jpg" alt="Image Description">
  </div>
  <div class="js-slide">
    <img class="img-fluid" src="../assets/img/img26.jpg" alt="Image Description">
  </div>
</div>

<div id="sliderSyncingThumb" class="js-slick-carousel u-slick u-slick--gutters-1 u-slick--transform-off"
     data-infinite="true"
     data-slides-show="3"
     data-is-thumbs="true"
     data-nav-for="#sliderSyncingNav"
     data-responsive='[{
       "breakpoint": 992,
       "settings": {
         "slidesToShow": 2
       }
     }, {
       "breakpoint": 768,
       "settings": {
         "slidesToShow": 1
       }
     }, {
       "breakpoint": 554,
       "settings": {
         "slidesToShow": 1
       }
     }]'>
  <div class="js-slide" style="cursor: pointer;">
    <img class="img-fluid" src="../assets/img/img24.jpg" alt="Image Description">
  </div>
  <div class="js-slide" style="cursor: pointer;">
    <img class="img-fluid" src="../assets/img/img25.jpg" alt="Image Description">
  </div>
  <div class="js-slide" style="cursor: pointer;">
    <img class="img-fluid" src="../assets/img/img26.jpg" alt="Image Description">
  </div>
</div>
Copy

Right-to-left (RTL) 

<div class="js-slick-carousel u-slick" dir="rtl"
     data-rtl="true"
     data-arrows-classes="d-none d-lg-inline-block u-slick__arrow-classic u-slick__arrow-centered--y rounded-circle"
     data-arrow-left-classes="fa fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
     data-arrow-right-classes="fa fa-arrow-right u-slick__arrow-classic-inner u-slick__arrow-classic-inner--right mr-lg-2 mr-xl-4">
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img24.jpg);">
    <div class="space-5">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img25.jpg);">
    <div class="space-5">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img26.jpg);">
    <div class="space-5">
    </div>
  </div>
</div>
Copy

Helpers

Arrows

.u-slick__arrow-centered--y class provides vertical center alignment, and .u-slick__arrow-centered--y horizontal center alignment for arrow classes. Use within data-arrows-classes attribute.

Arrow classic

.u-slick__arrow-classic class provides white air style icon buttons, while .u-slick__arrow-classic--dark a dark style.

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

<div
     data-arrows-classes="u-slick__arrow-classic u-slick__arrow-centered--y rounded-circle"
     data-arrow-left-classes="fa fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
     data-arrow-right-classes="fa fa-arrow-right u-slick__arrow-classic-inner u-slick__arrow-classic-inner--right mr-lg-2 mr-xl-4">
</div>
Copy

Arrow default

.u-slick__arrow class provides primary air style icon buttons.

<div
     data-arrows-classes="u-slick__arrow u-slick__arrow-centered--y rounded-circle"
     data-arrow-left-classes="fa fa-arrow-left u-slick__arrow-inner u-slick__arrow-inner--left ml-lg-2 ml-xl-4"
     data-arrow-right-classes="fa fa-arrow-right u-slick__arrow-inner u-slick__arrow-inner--right mr-lg-2 mr-xl-4">
</div>
Copy

Paginations

.u-slick__pagination-centered--y class provides vertical center alignment for pagination classes (for vertical paginations). Use within data-pagi-classes attribute.

White pagination

.u-slick__pagination--white class must be used along with .u-slick__pagination as a modifier to provide white style paginations.

<div class="js-slick-carousel u-slick"
     data-pagi-classes="text-center position-absolute position-absolute-bottom-0 u-slick__pagination u-slick__pagination--white mb-5">
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img24.jpg);">
    <div class="space-5">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img25.jpg);">
    <div class="space-5">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img26.jpg);">
    <div class="space-5">
    </div>
  </div>
</div>
Copy

Default pagination style

.u-slick__pagination for primary style paginations.

<div class="js-slick-carousel u-slick"
     data-pagi-classes="text-center position-absolute position-absolute-bottom-0 u-slick__pagination mb-5">
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img24.jpg);">
    <div class="space-5">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img25.jpg);">
    <div class="space-5">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img26.jpg);">
    <div class="space-5">
    </div>
  </div>
</div>
Copy

Modern pagination

First
Image Description
Second
Image Description
Third
Image Description 
<div id="paginationModernNav" class="js-slick-carousel u-slick mb-2"
     data-infinite="true"
     data-autoplay="true"
     data-speed="5000"
     data-fade="true"
     data-nav-for="#paginationModernThumb">
  <div class="js-slide">
    <img class="img-fluid" src="../assets/img/img24.jpg" alt="Image Description">
  </div>
  <div class="js-slide">
    <img class="img-fluid" src="../assets/img/img25.jpg" alt="Image Description">
  </div>
  <div class="js-slide">
    <img class="img-fluid" src="../assets/img/img26.jpg" alt="Image Description">
  </div>
</div>

<div id="paginationModernThumb" class="js-slick-carousel u-slick u-slick--cursor-pointer u-slick--pagination-modern u-slick--transform-off-lg"
     data-infinite="true"
     data-autoplay="true"
     data-speed="5000"
     data-center-mode="true"
     data-slides-show="3"
     data-is-thumbs="true"
     data-focus-on-select="true"
     data-nav-for="#paginationModernNav"
     data-responsive='[{
       "breakpoint": 992,
       "settings": {
         "slidesToShow": 2
       }
     }, {
       "breakpoint": 768,
       "settings": {
         "slidesToShow": 2
       }
     }, {
       "breakpoint": 554,
       "settings": {
         "slidesToShow": 1
       }
     }]'>
  <div class="js-slide u-slick--pagination-modern__item">
    <div class="media align-items-center bg-white border rounded">
      <div class="media-body px-3">
        <span class="u-slick--pagination-modern__item-text">First</span>
      </div>
      <img class="u-slick--pagination-modern__item-img rounded-right" src="../assets/img/img64.jpg" alt="Image Description">
    </div>
  </div>

  <div class="js-slide u-slick--pagination-modern__item">
    <div class="media align-items-center bg-white border rounded">
      <div class="media-body px-3">
        <span class="u-slick--pagination-modern__item-text">Second</span>
      </div>
      <img class="u-slick--pagination-modern__item-img rounded-right" src="../assets/img/img64.jpg" alt="Image Description">
    </div>
  </div>

  <div class="js-slide u-slick--pagination-modern__item">
    <div class="media align-items-center bg-white border rounded">
      <div class="media-body px-3">
        <span class="u-slick--pagination-modern__item-text">Third</span>
      </div>
      <img class="u-slick--pagination-modern__item-img rounded-right" src="../assets/img/img64.jpg" alt="Image Description">
    </div>
  </div>
</div>
Copy

Active border

Image Description
Image Description
Image Description 
<div class="row align-items-center">
  <div class="col-2">
    <div id="paginationActiveBorderThumb" class="js-slick-carousel u-slick u-slick--transform-off-lg u-slick--pagination-active-border"
         data-infinite="true"
         data-center-mode="true"
         data-slides-show="3"
         data-is-thumbs="true"
         data-vertical="true"
         data-focus-on-select="true"
         data-nav-for="#paginationActiveBorderNav">
      <div class="js-slide">
        <img class="img-fluid u-slick--pagination-active-border__item" src="../assets/img/img36.jpg" alt="Image Description">
      </div>
      <div class="js-slide">
        <img class="img-fluid u-slick--pagination-active-border__item" src="../assets/img/img37.jpg" alt="Image Description">
      </div>
      <div class="js-slide">
        <img class="img-fluid u-slick--pagination-active-border__item" src="../assets/img/img38.jpg" alt="Image Description">
      </div>
    </div>
  </div>

  <div class="col-10">
    <div id="paginationActiveBorderNav" class="js-slick-carousel u-slick"
         data-infinite="true"
         data-nav-for="#paginationActiveBorderThumb">
      <div class="js-slide">
        <img class="img-fluid" src="../assets/img/img24.jpg" alt="Image Description">
      </div>
      <div class="js-slide">
        <img class="img-fluid" src="../assets/img/img25.jpg" alt="Image Description">
      </div>
      <div class="js-slide">
        <img class="img-fluid" src="../assets/img/img26.jpg" alt="Image Description">
      </div>
    </div>
  </div>
</div>
Copy

Bordered

.u-slick__pagination-bordered--white class must be used along with .u-slick__pagination-bordered as a modifier to provide white style pagination option.

Image Description
Image Description
Image Description 
<div class="js-slick-carousel u-slick"
     data-infinite="true"
     data-adaptive-height="true"
     data-fade="true"
     data-pagi-classes="u-slick__pagination-bordered mt-3 mb-0">
  <div class="js-slide">
    <img class="img-fluid" src="../assets/img/img24.jpg" alt="Image Description">
  </div>
  <div class="js-slide">
    <img class="img-fluid" src="../assets/img/img25.jpg" alt="Image Description">
  </div>
  <div class="js-slide">
    <img class="img-fluid" src="../assets/img/img26.jpg" alt="Image Description">
  </div>
</div>
Copy

Simple

1

Title goes here

Text goes here

2

Title goes here

Text goes here

3

Title goes here

Text goes here

<div class="row align-items-lg-center">
  <div class="col-lg-3 mb-7 mb-lg-0">
    <div id="simpleSlickNavMain" class="js-slick-carousel u-slick u-slick--pagination-simple u-slick--transform-off"
         data-infinite="true"
         data-autoplay="true"
         data-speed="7000"
         data-slides-show="3"
         data-adaptive-height="true"
         data-vertical="true"
         data-vertical-swiping="true"
         data-focus-on-select="true"
         data-nav-for="#simpleSlickNavThumb">
      <div class="js-slide u-slick--pagination-simple__item">
        <div class="media">
          <span class="u-slick--pagination-simple__icon rounded-circle mr-3">
            <span class="u-slick--pagination-simple__icon-inner">1</span>
          </span>
          <div class="media-body">
            <h4 class="h6 u-slick--pagination-simple__title">Title goes here</h4>
            <p class="u-slick--pagination-simple__text">Text goes here</p>
          </div>
        </div>
      </div>

      <div class="js-slide u-slick--pagination-simple__item">
        <div class="media">
          <span class="u-slick--pagination-simple__icon rounded-circle mr-3">
            <span class="u-slick--pagination-simple__icon-inner">2</span>
          </span>
          <div class="media-body">
            <h4 class="h6 u-slick--pagination-simple__title">Title goes here</h4>
            <p class="u-slick--pagination-simple__text">Text goes here</p>
          </div>
        </div>
      </div>

      <div class="js-slide u-slick--pagination-simple__item">
        <div class="media">
          <span class="u-slick--pagination-simple__icon rounded-circle mr-3">
            <span class="u-slick--pagination-simple__icon-inner">3</span>
          </span>
          <div class="media-body">
            <h4 class="h6 u-slick--pagination-simple__title">Title goes here</h4>
            <p class="u-slick--pagination-simple__text">Text goes here</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-lg-9">
    <div id="simpleSlickNavThumb" class="js-slick-carousel u-slick"
         data-infinite="true"
         data-autoplay="true"
         data-speed="7000"
         data-fade="true"
         data-is-thumbs="true"
         data-nav-for="#simpleSlickNavMain">
      <div class="js-slide">
        <img class="img-fluid" src="../assets/img/img24.jpg" alt="Image Description">
      </div>

      <div class="js-slide">
        <img class="img-fluid" src="../assets/img/img25.jpg" alt="Image Description">
      </div>

      <div class="js-slide">
        <img class="img-fluid" src="../assets/img/img26.jpg" alt="Image Description">
      </div>
    </div>
  </div>
</div>
Copy

Numbered paginations

Paging v1

Wrap the slider with an element that declares position: relative;, include the carousel and .u-slick__paging-v1 class and tie them with the same ID or class and give this naming in the data-numbered-pagination="" attribute.

<div class="position-relative">
  <div class="js-slick-carousel u-slick"
       data-numbered-pagination="#slickPagingV1">
    <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img24.jpg);">
      <div class="space-5">
      </div>
    </div>
    <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img25.jpg);">
      <div class="space-5">
      </div>
    </div>
    <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img26.jpg);">
      <div class="space-5">
      </div>
    </div>
  </div>

  <div class="container position-relative">
    <div id="slickPagingV1" class="u-slick__paging-v1"></div>
  </div>
</div>
Copy

Equal height

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

Slide heading

Slide heading

Slide text

Slide heading

Slide text

and some more text...

Slide heading

Slide heading

Slide text

and some more text...

<div class="js-slick-carousel u-slick u-slick--equal-height u-slick--gutters-1"
     data-adaptive-height="true"
     data-arrows-classes="d-none d-lg-inline-block u-slick__arrow-classic u-slick__arrow-centered--y rounded-circle"
     data-arrow-left-classes="fa fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
     data-arrow-right-classes="fa fa-arrow-right u-slick__arrow-classic-inner u-slick__arrow-classic-inner--right mr-lg-2 mr-xl-4">
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img35.jpg);">
    <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(../assets/img/img35.jpg);">
    <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(../assets/img/img35.jpg);">
    <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(../assets/img/img35.jpg);">
    <div class="w-100 text-center space-3">
    </div>
  </div>
  <div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img35.jpg);">
    <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(../assets/img/img35.jpg);">
    <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>
Copy

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

u-slick--gutters-1

 Adds 4px spacing between slides.

u-slick--gutters-2

 Adds 8px spacing between slides.

u-slick--gutters-3

 Adds 16px spacing between slides.

JavaScript behavior

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-nav-for="".

Attribute Description

data-nav-for

 The ID of the carousel with which it will be synchronized.

data-is-thumbs

 Set to true, to preview for the other carousel.

data-arrows-classes

 Lists the common classes for prev and next.

data-arrow-left-classes

 Lists the common classes for prev.

data-arrow-left-classes

 Lists the common classes for next.

data-pagi-classes

 Lists the common classes for pagination.

data-numbered-pagination

 If data-numbered-pagination="true" is set to true, then it is a preview for the other carousel. List of classes to control the style of numbered pagination:
  • u-paging__current
  • u-paging__divider
  • u-paging__total

data-pagi-helper

 Inserts additional <span class="u-dots-helper"></span> markup for.

data-pagi-icons

 An auxiliary icon for pagination.

data-slides-show

 The amount of default slides.

data-slides-scroll

 The number of slides scrolled at a time.

data-autoplay

 If true, the automatic slide switch is turned on.

data-animation

 Animation smoothness. Possible values:
  • linear
  • ease
  • ease-in
  • ease-out
  • ease-in-out
  • step-start
  • step-end

data-easing

 Animation smoothness if you use the jquery.easing.js libraries For more detailed information, ses jQuery easing documentation.

data-fade

 If true, the slide effect is replaced by fade.

data-speed

 If data-autoplay="" is set to true, it sets the time at which the next slide will be displayed. The value is in ms.

data-rows

 Number of rows in a slide

data-center-mode

 If true, the carousel is always centered, and the central slide is always visible, and the rest can go beyond the visibility zone.

data-center-padding

 If data-center-mode="" is set to true, determines how many pixels the last slides are visible.

data-pause-hover

 If set to true, pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won't pause it.

data-variable-width

 If true, you can specify slides of different widths.

data-initial-slide

 Specifies which slide will be the starting one, that is if it is necessary for the slider to start to scroll not from the first slide.

data-vertical

 If true, the slides are scrolled vertically.

data-rtl

 If true, slides are scrolled from right-to-left (RTL).

Note! You will need to add dir="rtl" to the parent class. See Right-to-left (RTL) example

data-in-effect

 Revealing effect of slides. All effects are tied to the library animate.css.

data-out-effect

 Disappearing effect of slides. All effects are tied to the library animate.css.

data-infinite

 If true, the slides are looped.

data-title-pos-inside

 If true, adds a slide title to the inside of the dot pagination.

data-focus-on-select

 If true, after clicking on a slide, it becomes central.

data-lazy-load

 Image loading mode. It has 2 values:
  • ondemand
  • progressive
The path to the image in this case is replaced by data-lazy attribute, instead of src.

data-adaptive-height

 If data-adaptive-height="" is set to true, auto height mode will be enabled.

data-responsive

 Allows you to change the values of different parameters at different resolutions.

Official Documentation

For more detailed information, see the official documentation: Slick carousel.