Slick Carousel
A slideshow component for cycling through elements—images or slides of text—like a carousel.
Slick carousel documentationHow 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>
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 slick--pagination slick--pagination-white slick-pagination-bottom-center"
data-hs-slick-carousel-options='{
"dots": true
}'>
<div class="js-slide bg-img-hero-center" style="background-image: url(...);">
<div class="space-5">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(...);">
<div class="space-5">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(...);">
<div class="space-5">
</div>
</div>
</div>
With counter
<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
infinitemodeWhen
"infinite": trueis 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>
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
Casy Williams
NERC CIP Consultant
Elon Fisher
Consultant
Linda Spears
Business Analyst
Chris Johnson
Firewall Engineer
<!-- 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-navy bg-img-hero min-h-620rem" style="background-image: url(...);">
<div class="container d-flex align-items-center min-h-620rem">
<div class="w-lg-40 mr-5">
<h3 class="text-white">First slide</h3>
</div>
</div>
</div>
<div class="js-slide d-flex gradient-x-overlay-sm-navy bg-img-hero min-h-620rem" style="background-image: url(...);">
<div class="container d-flex align-items-center min-h-620rem">
<div class="w-lg-40 mr-5">
<h3 class="text-white">Second slide</h3>
</div>
</div>
</div>
<div class="js-slide d-flex gradient-x-overlay-sm-navy bg-img-hero min-h-620rem" style="background-image: url(...);">
<div class="container d-flex align-items-center min-h-620rem">
<div class="w-lg-40 mr-5">
<h3 class="text-white">Third slide</h3>
</div>
</div>
</div>
</div>
<!-- End Main Slider -->
<!-- Slider Nav -->
<div class="container slick-pagination-line-wrapper content-centered-y right-0 left-0">
<div class="content-centered-y right-0 mr-3">
<div id="heroSliderNav" class="js-slick-carousel slick slick-pagination-line max-w-27rem ml-auto"
data-hs-slick-carousel-options='{
"vertical": true,
"verticalSwiping": true,
"infinite": true,
"autoplay": true,
"autoplaySpeed": 10000,
"slidesToShow": 3,
"isThumbs": true,
"asNavFor": "#heroSlider"
}'>
<div class="js-slide my-3">
<span class="text-white">First slide</span>
<span class="slick-pagination-line-progress">
<span class="slick-pagination-line-progress-helper"></span>
</span>
</div>
<div class="js-slide my-3">
<span class="text-white">Second slide</span>
<span class="slick-pagination-line-progress">
<span class="slick-pagination-line-progress-helper"></span>
</span>
</div>
<div class="js-slide my-3">
<span class="text-white">Third slide</span>
<span class="slick-pagination-line-progress">
<span class="slick-pagination-line-progress-helper"></span>
</span>
</div>
</div>
</div>
</div>
<!-- End Slider Nav -->
</div>
Equal height
With the use of .slick-equal-height class, turn your carousel contents into equal height blocks.
<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 |
|---|---|
|
|
Adds 4px spacing between slides. |
|
|
Adds 8px spacing between slides. |
|
|
Adds 15px spacing between slides. |
SCSS
SCSS-files of the component can be found here assets/scss/front/vendor/slick/ and her ../../assets/scss/front/slick/
Extend
By assigning a variable, you can call the standard methods of the plugin:
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$('.js-slick-carousel').each(function() {
var slickCarousel = $.HSCore.components.HSSlickCarousel.init($(this));
console.log(slickCarousel.slick('slickCurrentSlide'));
});
});
</script>
Attributes
By assigning a variable, you can call the standard methods of the plugin:
data-hs-slick-carousel-options='{
...
// Custom
"initialDelay": 600,
"isThumbs": true,
"isThumbsProgress": false,
"thumbsProgressContainer": "#ID",
"thumbsProgressOptions": {
"color": "#000",
"width": 4
},
"animationIn": "fadeIn",
"animationOut": "fadeOut",
"dotsWithIcon": "<i class=\"far fa-dot-circle\"></i>",
"dotsFromTitles": false,
"hasDotsHelper": false,
"counterSelector": "#ID",
"counterDivider": " | ",
"counterClassMap": {
"current": "slick-counter-current",
"total": "slick-counter-total",
"divider": "slick-counter-divider"
}
}' - array
Methods
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-slick-carousel-options='{}'. For more detailed or missing attributes/functions, see the official documentation page.
| Parameters | Description | Default value |
|---|---|---|
|
|
Sets a delay for autoplaying a slayer | 600 |
|
|
If true, then is a preview for another carousel |
false |
|
|
If true, then generates additional markup simulating a progress circle |
false |
|
|
If true, the selector to which additional markup will be generated when isThumbsProgress is true |
null |
|
|
Color of the progress circle line | - |
|
|
Progress circle line width | - |
|
|
CSS appearing effect | null |
|
|
CSS disappearing effect | null |
|
|
Markup auxiliary icons for pagination bunkers | null |
|
|
If true, then adds the slide title inside the corresponding pagination dot |
null |
|
|
If true, then inserts additional markup <span class = "dots-helper"> </span> into the bunkers |
false |
|
|
If true, a slide counter appears |
null |
|
|
Divider, which separates the index of the current slide and the total number of slides if counterSelector is true |
"/" |
|
|
Class name for the element that displays the index of the current slide, if counterSelector is true |
- |
|
|
Class name for the element displaying the total number of slides if counterSelector is true |
- |
|
|
Class name for the separator if counterSelector is true |
- |