Slick Carousel

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

Slick carousel documentation

How to use?

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

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

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

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

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

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

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

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

Examples

Image slides only

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

Text slides only

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

With controls

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

With pagination

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

With counter

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

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

Autoplay

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

Infinite

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

With rows

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

With animation

Slick issues with infinite mode

When "infinite": true is on, there is a cloning issue when sliding between the first and last items. For more information, read https://github.com/kenwheeler/slick/issues/940

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

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

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

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

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

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

Crossfade

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

Vertical

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

Multiple items

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

Multiple scroll

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

Variable width

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

Adaptive height

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

Responsive display

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

Center mode

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

Center slides

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

Slider syncing

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

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

Circle thumb progress

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

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

Line thumb progress

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

No transition

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

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

Draggable

Disabled mouse dragging example.

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

Swipe

Disabled swiping example.

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

Touch move

Disabled slide motion with touch example.

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

Right-to-left (RTL)

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

Helpers

Arrows

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

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

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

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

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

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

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

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

Paginations

.slick-pagination default style.

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

.slick-pagination-white white style.

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

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

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

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

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

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

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

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

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

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

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

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

.slick-pagination-line with progress bar

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

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

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

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

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

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

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

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

Equal height

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

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

Others

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

Class Description

slick-gutters-1

Adds 4px spacing between slides.

slick-gutters-2

Adds 8px spacing between slides.

slick-gutters-3

Adds 15px spacing between slides.

SCSS

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

JavaScript behavior

Extend

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

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

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

Attributes

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

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

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

Methods

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

Parameters Description Default value

initialDelay

Sets a delay for autoplaying a slayer 600

isThumbs

If true, then is a preview for another carousel false

thumbsProgress

If true, then generates additional markup simulating a progress circle false

thumbsProgressContainer

If true, the selector to which additional markup will be generated when isThumbsProgress is true null

thumbsProgressOptions.color

Color of the progress circle line -

thumbsProgressOptions.width

Progress circle line width -

animationIn

CSS appearing effect null

animationOut

CSS disappearing effect null

dotsWithIcon

Markup auxiliary icons for pagination bunkers null

dotsFromTitles

If true, then adds the slide title inside the corresponding pagination dot null

hasDotsHelper

If true, then inserts additional markup <span class = "dots-helper"> </span> into the bunkers false

counterSelector

If true, a slide counter appears null

counterDivider

Divider, which separates the index of the current slide and the total number of slides if counterSelector is true "/"

counterClassMap.current

Class name for the element that displays the index of the current slide, if counterSelector is true -

counterClassMap.total

Class name for the element displaying the total number of slides if counterSelector is true -

counterClassMap.divider

Class name for the separator if counterSelector is true -