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.
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>
The Slick from the Front theme is different from the original version. The latest version from NPM contains bugs and some functions do not work due to bugs in the main scripts of the plugin. For this reason, used the stable version of the plugin with fixes and extended features until it is fixed.
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
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-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 |
|---|---|
|
|
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 |
- |