Slick Carousel

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

How it works

Front 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 Front 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="fas fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
                         data-arrow-right-classes="fas 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="fas fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
                         data-arrow-right-classes="fas 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"></div>
                      </div>
                    </div>
                  
                

Autoplay

                  
                    <div class="js-slick-carousel u-slick"
                         data-autoplay="true"
                         data-autoplay-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-autoplay-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="fas fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
                         data-arrow-right-classes="fas 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="fas fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
                         data-arrow-right-classes="fas 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="fas fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
                         data-arrow-right-classes="fas 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="fas fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
                         data-arrow-right-classes="fas 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="fas fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
                         data-arrow-right-classes="fas 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="fas fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
                         data-arrow-right-classes="fas 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="fas fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
                         data-arrow-right-classes="fas 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="fas fa-arrow-left u-slick__arrow-inner u-slick__arrow-inner--left ml-lg-2 ml-xl-4"
                         data-arrow-right-classes="fas 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="fas fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
                         data-arrow-right-classes="fas 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>
                  
                

Thumb progress

                  
                    <div id="thumbProgress" class="js-slick-carousel u-slick mb-3"
                         data-nav-for="#thumbProgressNav">
                      <div class="js-slide">
                        <img class="img-fluid w-100" src="../assets/img/img27.jpg" alt="Image Description">
                      </div>
                      <div class="js-slide">
                        <img class="img-fluid w-100" src="../assets/img/img28.jpg" alt="Image Description">
                      </div>
                      <div class="js-slide">
                        <img class="img-fluid w-100" src="../assets/img/img29.jpg" alt="Image Description">
                      </div>
                      <div class="js-slide">
                        <img class="img-fluid w-100" src="../assets/img/img30.jpg" alt="Image Description">
                      </div>
                      <div class="js-slide">
                        <img class="img-fluid w-100" src="../assets/img/img31.jpg" alt="Image Description">
                      </div>
                    </div>

                    <div id="thumbProgressNav" class="js-slick-carousel u-slick u-slick--transform-off max-width-27 mx-auto"
                         data-slides-show="3"
                         data-is-thumbs="true"
                         data-is-thumbs-progress="true"
                         data-thumbs-progress-options='{
                           "color": "#377dff",
                           "width": 8
                         }'
                         data-thumbs-progress-container=".js-slick-thumb-progress"
                         data-nav-for="#thumbProgress">
                      <div class="js-slide p-1">
                        <a class="js-slick-thumb-progress position-relative d-block u-avatar border rounded-circle p-1" href="javascript:;">
                          <img class="img-fluid rounded-circle" src="../assets/img/img36.jpg" alt="Image Description">
                        </a>
                      </div>
                      <div class="js-slide p-1">
                        <a class="js-slick-thumb-progress position-relative d-block u-avatar border rounded-circle p-1" href="javascript:;">
                          <img class="img-fluid rounded-circle" src="../assets/img/img37.jpg" alt="Image Description">
                        </a>
                      </div>
                      <div class="js-slide p-1">
                        <a class="js-slick-thumb-progress position-relative d-block u-avatar border rounded-circle p-1" href="javascript:;">
                          <img class="img-fluid rounded-circle" src="../assets/img/img38.jpg" alt="Image Description">
                        </a>
                      </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="fas fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
                         data-arrow-right-classes="fas 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="fas fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
                         data-arrow-right-classes="fas 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 for arrow classes. Use within data-arrows-classes attribute.

Arrow classic

.u-slick__arrow-classic class provides white air style icon buttons.

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="fas fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
                         data-arrow-right-classes="fas 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="fas fa-arrow-left u-slick__arrow-inner u-slick__arrow-inner--left ml-lg-2 ml-xl-4"
                         data-arrow-right-classes="fas fa-arrow-right u-slick__arrow-inner u-slick__arrow-inner--right mr-lg-2 mr-xl-4">
                    </div>
                  
                

.u-slick__arrow--flat to apply flat style arrows.

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

.u-slick__arrow--flat-white to apply white flat style arrows.

                  
                    <div
                         data-arrows-classes="u-slick__arrow u-slick__arrow--flat-white u-slick__arrow-centered--y rounded-circle"
                         data-arrow-left-classes="fas fa-arrow-left u-slick__arrow-inner u-slick__arrow-inner--left ml-lg-2 ml-xl-4"
                         data-arrow-right-classes="fas 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 right-0 bottom-0 left-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 right-0 bottom-0 left-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>
                  
                

Vertical pagination style

Also with additional classes like, .u-slick__pagination-centered--y and .u-slick__pagination--block can be turned into vertically positioned style.

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

Modern pagination

.u-slick--pagination-modern is another pagination style that provides modern look of pagination style.

                  
                    <div id="paginationModernNav" class="js-slick-carousel u-slick mb-2"
                         data-infinite="true"
                         data-autoplay="true"
                         data-autoplay-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--pagination-modern u-slick--transform-off mx-auto"
                         data-infinite="true"
                         data-autoplay="true"
                         data-autoplay-speed="5000"
                         data-center-mode="true"
                         data-slides-show="3"
                         data-is-thumbs="true"
                         data-focus-on-select="true"
                         data-nav-for="#paginationModernNav">
                      <div class="js-slide">
                        <img class="u-avatar rounded-circle mx-auto" src="../assets/img/img36.jpg" alt="Image Description">
                      </div>
                      <div class="js-slide">
                        <img class="u-avatar rounded-circle mx-auto" src="../assets/img/img37.jpg" alt="Image Description">
                      </div>
                      <div class="js-slide">
                        <img class="u-avatar rounded-circle mx-auto" src="../assets/img/img38.jpg" alt="Image Description">
                      </div>
                    </div>
                  
                

Numbered paginations

Paging v1

Wrap the slider with an element that declares position: relative;, include the carousel and .u-slick__paging 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"></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="fas fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
                         data-arrow-right-classes="fas 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 15px 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-is-thumbs-progress

Set to true, to enable progress style pagination loader.

data-is-thumbs-progress-options

It has 2 values:
  • color - set color of the progress
  • width - width of the progress border

data-thumbs-progress-container=""

Add class to which the progress will be linked and animated.

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.