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-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 Space to enable it.

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

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>
            
          

Text slides only

            
              <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>
            
          

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>
            
          

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>
            
          

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>
            
          

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>
            
          

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>
            
          

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>
            
          

With animation

            
              <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>
            
          

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>
            
          

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>
            
          

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>
            
          

Variable width

            
              <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>
            
          

Adaptive height

            
              <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>
            
          

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>
            
          

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>
            
          

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>
            
          

Slider syncing

            
              <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>
            
          

No transition

            
              <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>
            
          

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>
            
          

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>
              
            

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>
              
            

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>
              
            

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>
              
            

Modern pagination

              
                <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>
              
            

Active border

              
                <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>
              
            

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.

              
                <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>
              
            

Simple

              
                <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>
              
            

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>
              
            

Equal height

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

            
              <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>
            
          

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.