Slick Carousel
A slideshow component for cycling through elements—images or slides of text—like a carousel.
How it works
Space has taken the advantage of Slick carousel and extended it with dozens of new options. The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.
How to use?
Copy-paste the stylesheet <link> into your <head> to load the CSS.
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
Copy-paste the following <script>s near the end of your pages under JS Implementing Plugins to enable them.
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
Copy-paste the following <script> near the end of your pages under JS Space to enable it.
<script src="../../assets/js/helpers/hs.slick-carousel.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>
Image slides only
<div class="js-slick-carousel u-slick">
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img24.jpg);">
<div class="space-5">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img25.jpg);">
<div class="space-5">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img26.jpg);">
<div class="space-5">
</div>
</div>
</div>
Text slides only
<div class="js-slick-carousel u-slick">
<div class="js-slide" style="background-color: #b1bbc4;">
<div class="space-3 text-center">
<h3 class="h1">First text slide</h3>
</div>
</div>
<div class="js-slide" style="background-color: #97a4af;">
<div class="space-3 text-center">
<h3 class="h1">Second text slide</h3>
</div>
</div>
<div class="js-slide" style="background-color: #77838f;">
<div class="space-3 text-center">
<h3 class="h1">Third text slide</h3>
</div>
</div>
</div>
With controls
<div class="js-slick-carousel u-slick"
data-arrows-classes="d-none d-lg-inline-block u-slick__arrow-classic u-slick__arrow-centered--y rounded-circle"
data-arrow-left-classes="fa fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
data-arrow-right-classes="fa fa-arrow-right u-slick__arrow-classic-inner u-slick__arrow-classic-inner--right mr-lg-2 mr-xl-4">
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img24.jpg);">
<div class="space-5">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img25.jpg);">
<div class="space-5">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img26.jpg);">
<div class="space-5">
</div>
</div>
</div>
With pagination
<div class="js-slick-carousel u-slick"
data-arrows-classes="d-none d-lg-inline-block u-slick__arrow-classic u-slick__arrow-centered--y rounded-circle"
data-arrow-left-classes="fa fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
data-arrow-right-classes="fa fa-arrow-right u-slick__arrow-classic-inner u-slick__arrow-classic-inner--right mr-lg-2 mr-xl-4">
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img24.jpg);">
<div class="space-5">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img25.jpg);">
<div class="space-5">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img26.jpg);">
<div class="space-5">
</div>
</div>
</div>
With numbered pagination
<div class="position-relative">
<div class="js-slick-carousel u-slick"
data-numbered-pagination="#slickPaging">
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img24.jpg);">
<div class="space-5">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img25.jpg);">
<div class="space-5">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img26.jpg);">
<div class="space-5">
</div>
</div>
</div>
<div class="container position-relative">
<div id="slickPaging" class="u-slick__paging-v1"></div>
</div>
</div>
Autoplay
<div class="js-slick-carousel u-slick"
data-autoplay="true"
data-speed="5000">
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img24.jpg);">
<div class="space-5">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img25.jpg);">
<div class="space-5">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img26.jpg);">
<div class="space-5">
</div>
</div>
</div>
Infinite
<div class="js-slick-carousel u-slick"
data-infinite="true">
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img24.jpg);">
<div class="space-5">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img25.jpg);">
<div class="space-5">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img26.jpg);">
<div class="space-5">
</div>
</div>
</div>
With rows
<div class="js-slick-carousel u-slick u-slick--gutters-1"
data-slides-show="2"
data-rows="2">
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img27.jpg);">
<div class="space-3">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img28.jpg);">
<div class="space-3">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img29.jpg);">
<div class="space-3">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img30.jpg);">
<div class="space-3">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img31.jpg);">
<div class="space-3">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img32.jpg);">
<div class="space-3">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img33.jpg);">
<div class="space-3">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img34.jpg);">
<div class="space-3">
</div>
</div>
</div>
With animation
<div class="js-slick-carousel u-slick"
data-autoplay="true"
data-speed="10000"
data-infinite="true"
data-arrows-classes="d-none d-lg-inline-block u-slick__arrow-classic u-slick__arrow-centered--y rounded-circle"
data-arrow-left-classes="fa fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
data-arrow-right-classes="fa fa-arrow-right u-slick__arrow-classic-inner u-slick__arrow-classic-inner--right mr-lg-2 mr-xl-4">
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img35.jpg);">
<div class="text-center space-3">
<h2 class="text-white font-weight-light mb-2"
data-scs-animation-in="fadeInUp">
First slide animation heading
</h2>
<p class="text-white"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="200">First slide description</p>
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img35.jpg);">
<div class="text-center space-3">
<h2 class="text-white font-weight-light mb-2"
data-scs-animation-in="fadeInUp">
Second slide animation heading
</h2>
<p class="text-white"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="200">Second slide description</p>
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img35.jpg);">
<div class="text-center space-3">
<h2 class="text-white font-weight-light mb-2"
data-scs-animation-in="fadeInUp">
Three slide animation heading
</h2>
<p class="text-white"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="200">Three slide description</p>
</div>
</div>
</div>
Crossfade
<div class="js-slick-carousel u-slick"
data-fade="true"
data-arrows-classes="d-none d-lg-inline-block u-slick__arrow-classic u-slick__arrow-centered--y rounded-circle"
data-arrow-left-classes="fa fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
data-arrow-right-classes="fa fa-arrow-right u-slick__arrow-classic-inner u-slick__arrow-classic-inner--right mr-lg-2 mr-xl-4">
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img24.jpg);">
<div class="space-5">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img25.jpg);">
<div class="space-5">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img26.jpg);">
<div class="space-5">
</div>
</div>
</div>
Vertical
<div class="position-relative">
<div class="js-slick-carousel u-slick"
data-vertical="true"
data-pagi-classes="position-absolute right-0 u-slick__pagination u-slick__pagination--block u-slick__pagination-centered--y u-slick__pagination--white mr-5">
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img24.jpg);">
<div class="space-5">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img25.jpg);">
<div class="space-5">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img26.jpg);">
<div class="space-5">
</div>
</div>
</div>
</div>
Multiple items
<div class="js-slick-carousel u-slick u-slick--gutters-1"
data-slides-show="3"
data-arrows-classes="d-none d-lg-inline-block u-slick__arrow-classic u-slick__arrow-centered--y rounded-circle"
data-arrow-left-classes="fa fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
data-arrow-right-classes="fa fa-arrow-right u-slick__arrow-classic-inner u-slick__arrow-classic-inner--right mr-lg-2 mr-xl-4">
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img27.jpg);">
<div class="space-3">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img28.jpg);">
<div class="space-3">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img29.jpg);">
<div class="space-3">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img30.jpg);">
<div class="space-3">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img31.jpg);">
<div class="space-3">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img32.jpg);">
<div class="space-3">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img33.jpg);">
<div class="space-3">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img34.jpg);">
<div class="space-3">
</div>
</div>
</div>
Variable width
<div class="js-slick-carousel u-slick u-slick--gutters-1"
data-slides-show="3"
data-slides-scroll="1"
data-variable-width="true"
data-infinite="true"
data-arrows-classes="d-none d-lg-inline-block u-slick__arrow-classic u-slick__arrow-centered--y rounded-circle"
data-arrow-left-classes="fa fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
data-arrow-right-classes="fa fa-arrow-right u-slick__arrow-classic-inner u-slick__arrow-classic-inner--right mr-lg-2 mr-xl-4"
data-responsive='[{
"breakpoint": 992,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 1
}
}, {
"breakpoint": 554,
"settings": {
"slidesToShow": 1
}
}]'>
<div class="js-slide" style="width: 200px; background-color: #b1bbc4;">
<div class="text-center space-3">
<h4>200</h4>
</div>
</div>
<div class="js-slide" style="width: 250px; background-color: #97a4af;">
<div class="text-center space-3">
<h4>250</h4>
</div>
</div>
<div class="js-slide" style="width: 300px; background-color: #77838f;">
<div class="text-center space-3">
<h4>300</h4>
</div>
</div>
<div class="js-slide" style="width: 170px; background-color: #8c98a4;">
<div class="text-center space-3">
<h4>170</h4>
</div>
</div>
<div class="js-slide" style="width: 280px; background-color: #5a5f69;">
<div class="text-center space-3">
<h4>280</h4>
</div>
</div>
<div class="js-slide" style="width: 280px; background-color: #828286;">
<div class="text-center space-3">
<h4>280</h4>
</div>
</div>
</div>
Adaptive height
<div class="js-slick-carousel u-slick u-slick--gutters-1"
data-adaptive-height="true"
data-arrows-classes="d-none d-lg-inline-block u-slick__arrow-classic u-slick__arrow-centered--y rounded-circle"
data-arrow-left-classes="fa fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
data-arrow-right-classes="fa fa-arrow-right u-slick__arrow-classic-inner u-slick__arrow-classic-inner--right mr-lg-2 mr-xl-4">
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img35.jpg);">
<div class="text-center space-3">
<h4 class="text-white">Slide heading</h4>
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img35.jpg);">
<div class="text-center space-3">
<h4 class="text-white">Slide heading</h4>
<p class="text-white mb-0">Slide text</p>
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img35.jpg);">
<div class="text-center space-3">
<h4 class="text-white">Slide heading</h4>
<p class="text-white mb-0">Slide text</p>
<p class="text-white mb-0">and some more text...</p>
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img35.jpg);">
<div class="text-center space-3">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img35.jpg);">
<div class="text-center space-3">
<h4 class="text-white">Slide heading</h4>
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img35.jpg);">
<div class="text-center space-3">
<h4 class="text-white">Slide heading</h4>
<p class="text-white mb-0">Slide text</p>
<p class="text-white mb-0">and some more text...</p>
</div>
</div>
</div>
Responsive display
<div class="js-slick-carousel u-slick u-slick--gutters-1"
data-slides-show="3"
data-slides-scroll="1"
data-arrows-classes="d-none d-lg-inline-block u-slick__arrow-classic u-slick__arrow-centered--y rounded-circle"
data-arrow-left-classes="fa fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
data-arrow-right-classes="fa fa-arrow-right u-slick__arrow-classic-inner u-slick__arrow-classic-inner--right mr-lg-2 mr-xl-4"
data-responsive='[{
"breakpoint": 992,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 1
}
}, {
"breakpoint": 554,
"settings": {
"slidesToShow": 1
}
}]'>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img35.jpg);">
<div class="text-center space-3">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img35.jpg);">
<div class="text-center space-3">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img35.jpg);">
<div class="text-center space-3">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img35.jpg);">
<div class="text-center space-3">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img35.jpg);">
<div class="text-center space-3">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img35.jpg);">
<div class="text-center space-3">
</div>
</div>
</div>
Center mode
<div class="js-slick-carousel u-slick u-slick--gutters-1"
data-infinite="true"
data-slides-show="1"
data-slides-scroll="1"
data-center-mode="true"
data-center-padding="150px"
data-arrows-classes="d-none d-lg-inline-block u-slick__arrow-classic u-slick__arrow-centered--y rounded-circle"
data-arrow-left-classes="fa fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
data-arrow-right-classes="fa fa-arrow-right u-slick__arrow-classic-inner u-slick__arrow-classic-inner--right mr-lg-2 mr-xl-4"
data-responsive='[{
"breakpoint": 992,
"settings": {
"centerPadding": "120px"
}
}, {
"breakpoint": 768,
"settings": {
"centerPadding": "80px"
}
}, {
"breakpoint": 554,
"settings": {
"centerPadding": "50px"
}
}]'>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img24.jpg);">
<div class="text-center space-3">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img25.jpg);">
<div class="text-center space-3">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img26.jpg);">
<div class="text-center space-3">
</div>
</div>
</div>
Center slides
<div class="js-slick-carousel u-slick u-slick--gutters-1"
data-slides-show="2"
data-slides-scroll="1"
data-center-mode="true"
data-arrows-classes="d-none d-lg-inline-block u-slick__arrow u-slick__arrow-centered--y rounded-circle"
data-arrow-left-classes="fa fa-arrow-left u-slick__arrow-inner u-slick__arrow-inner--left ml-lg-2 ml-xl-4"
data-arrow-right-classes="fa fa-arrow-right u-slick__arrow-inner u-slick__arrow-inner--right mr-lg-2 mr-xl-4">
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img24.jpg);">
<div class="space-3">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img25.jpg);">
<div class="space-3">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img26.jpg);">
<div class="space-3">
</div>
</div>
</div>
Slider syncing
<div id="sliderSyncingNav" class="js-slick-carousel u-slick mb-2"
data-infinite="true"
data-arrows-classes="d-none d-lg-inline-block u-slick__arrow-classic u-slick__arrow-centered--y rounded-circle"
data-arrow-left-classes="fa fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
data-arrow-right-classes="fa fa-arrow-right u-slick__arrow-classic-inner u-slick__arrow-classic-inner--right mr-lg-2 mr-xl-4"
data-nav-for="#sliderSyncingThumb">
<div class="js-slide">
<img class="img-fluid" src="../assets/img/img24.jpg" alt="Image Description">
</div>
<div class="js-slide">
<img class="img-fluid" src="../assets/img/img25.jpg" alt="Image Description">
</div>
<div class="js-slide">
<img class="img-fluid" src="../assets/img/img26.jpg" alt="Image Description">
</div>
</div>
<div id="sliderSyncingThumb" class="js-slick-carousel u-slick u-slick--gutters-1 u-slick--transform-off"
data-infinite="true"
data-slides-show="3"
data-is-thumbs="true"
data-nav-for="#sliderSyncingNav"
data-responsive='[{
"breakpoint": 992,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 1
}
}, {
"breakpoint": 554,
"settings": {
"slidesToShow": 1
}
}]'>
<div class="js-slide" style="cursor: pointer;">
<img class="img-fluid" src="../assets/img/img24.jpg" alt="Image Description">
</div>
<div class="js-slide" style="cursor: pointer;">
<img class="img-fluid" src="../assets/img/img25.jpg" alt="Image Description">
</div>
<div class="js-slide" style="cursor: pointer;">
<img class="img-fluid" src="../assets/img/img26.jpg" alt="Image Description">
</div>
</div>
No transition
<div id="sliderSyncingNav" class="js-slick-carousel u-slick mb-2"
data-infinite="true"
data-arrows-classes="d-none d-lg-inline-block u-slick__arrow-classic u-slick__arrow-centered--y rounded-circle"
data-arrow-left-classes="fa fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
data-arrow-right-classes="fa fa-arrow-right u-slick__arrow-classic-inner u-slick__arrow-classic-inner--right mr-lg-2 mr-xl-4"
data-nav-for="#sliderSyncingThumb">
<div class="js-slide">
<img class="img-fluid" src="../assets/img/img24.jpg" alt="Image Description">
</div>
<div class="js-slide">
<img class="img-fluid" src="../assets/img/img25.jpg" alt="Image Description">
</div>
<div class="js-slide">
<img class="img-fluid" src="../assets/img/img26.jpg" alt="Image Description">
</div>
</div>
<div id="sliderSyncingThumb" class="js-slick-carousel u-slick u-slick--gutters-1 u-slick--transform-off"
data-infinite="true"
data-slides-show="3"
data-is-thumbs="true"
data-nav-for="#sliderSyncingNav"
data-responsive='[{
"breakpoint": 992,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 1
}
}, {
"breakpoint": 554,
"settings": {
"slidesToShow": 1
}
}]'>
<div class="js-slide" style="cursor: pointer;">
<img class="img-fluid" src="../assets/img/img24.jpg" alt="Image Description">
</div>
<div class="js-slide" style="cursor: pointer;">
<img class="img-fluid" src="../assets/img/img25.jpg" alt="Image Description">
</div>
<div class="js-slide" style="cursor: pointer;">
<img class="img-fluid" src="../assets/img/img26.jpg" alt="Image Description">
</div>
</div>
Right-to-left (RTL)
<div class="js-slick-carousel u-slick" dir="rtl"
data-rtl="true"
data-arrows-classes="d-none d-lg-inline-block u-slick__arrow-classic u-slick__arrow-centered--y rounded-circle"
data-arrow-left-classes="fa fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
data-arrow-right-classes="fa fa-arrow-right u-slick__arrow-classic-inner u-slick__arrow-classic-inner--right mr-lg-2 mr-xl-4">
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img24.jpg);">
<div class="space-5">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img25.jpg);">
<div class="space-5">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img26.jpg);">
<div class="space-5">
</div>
</div>
</div>
Arrows
.u-slick__arrow-centered--y class provides vertical center alignment, and .u-slick__arrow-centered--y horizontal center alignment for arrow classes. Use within data-arrows-classes attribute.
Arrow classic
.u-slick__arrow-classic class provides white air style icon buttons, while .u-slick__arrow-classic--dark a dark style.
In addition, .u-slick__arrow--offset class can be added to offset left and right arrows for 40px out of the container for only large and above devices.
<div
data-arrows-classes="u-slick__arrow-classic u-slick__arrow-centered--y rounded-circle"
data-arrow-left-classes="fa fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
data-arrow-right-classes="fa fa-arrow-right u-slick__arrow-classic-inner u-slick__arrow-classic-inner--right mr-lg-2 mr-xl-4">
</div>
Arrow default
.u-slick__arrow class provides primary air style icon buttons.
<div
data-arrows-classes="u-slick__arrow u-slick__arrow-centered--y rounded-circle"
data-arrow-left-classes="fa fa-arrow-left u-slick__arrow-inner u-slick__arrow-inner--left ml-lg-2 ml-xl-4"
data-arrow-right-classes="fa fa-arrow-right u-slick__arrow-inner u-slick__arrow-inner--right mr-lg-2 mr-xl-4">
</div>
Paginations
.u-slick__pagination-centered--y class provides vertical center alignment for pagination classes (for vertical paginations). Use within data-pagi-classes attribute.
White pagination
.u-slick__pagination--white class must be used along with .u-slick__pagination as a modifier to provide white style paginations.
<div class="js-slick-carousel u-slick"
data-pagi-classes="text-center position-absolute position-absolute-bottom-0 u-slick__pagination u-slick__pagination--white mb-5">
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img24.jpg);">
<div class="space-5">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img25.jpg);">
<div class="space-5">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img26.jpg);">
<div class="space-5">
</div>
</div>
</div>
Default pagination style
.u-slick__pagination for primary style paginations.
<div class="js-slick-carousel u-slick"
data-pagi-classes="text-center position-absolute position-absolute-bottom-0 u-slick__pagination mb-5">
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img24.jpg);">
<div class="space-5">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img25.jpg);">
<div class="space-5">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img26.jpg);">
<div class="space-5">
</div>
</div>
</div>
Modern pagination
First
Second
Third
<div id="paginationModernNav" class="js-slick-carousel u-slick mb-2"
data-infinite="true"
data-autoplay="true"
data-speed="5000"
data-fade="true"
data-nav-for="#paginationModernThumb">
<div class="js-slide">
<img class="img-fluid" src="../assets/img/img24.jpg" alt="Image Description">
</div>
<div class="js-slide">
<img class="img-fluid" src="../assets/img/img25.jpg" alt="Image Description">
</div>
<div class="js-slide">
<img class="img-fluid" src="../assets/img/img26.jpg" alt="Image Description">
</div>
</div>
<div id="paginationModernThumb" class="js-slick-carousel u-slick u-slick--cursor-pointer u-slick--pagination-modern u-slick--transform-off-lg"
data-infinite="true"
data-autoplay="true"
data-speed="5000"
data-center-mode="true"
data-slides-show="3"
data-is-thumbs="true"
data-focus-on-select="true"
data-nav-for="#paginationModernNav"
data-responsive='[{
"breakpoint": 992,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 554,
"settings": {
"slidesToShow": 1
}
}]'>
<div class="js-slide u-slick--pagination-modern__item">
<div class="media align-items-center bg-white border rounded">
<div class="media-body px-3">
<span class="u-slick--pagination-modern__item-text">First</span>
</div>
<img class="u-slick--pagination-modern__item-img rounded-right" src="../assets/img/img64.jpg" alt="Image Description">
</div>
</div>
<div class="js-slide u-slick--pagination-modern__item">
<div class="media align-items-center bg-white border rounded">
<div class="media-body px-3">
<span class="u-slick--pagination-modern__item-text">Second</span>
</div>
<img class="u-slick--pagination-modern__item-img rounded-right" src="../assets/img/img64.jpg" alt="Image Description">
</div>
</div>
<div class="js-slide u-slick--pagination-modern__item">
<div class="media align-items-center bg-white border rounded">
<div class="media-body px-3">
<span class="u-slick--pagination-modern__item-text">Third</span>
</div>
<img class="u-slick--pagination-modern__item-img rounded-right" src="../assets/img/img64.jpg" alt="Image Description">
</div>
</div>
</div>
Active border
<div class="row align-items-center">
<div class="col-2">
<div id="paginationActiveBorderThumb" class="js-slick-carousel u-slick u-slick--transform-off-lg u-slick--pagination-active-border"
data-infinite="true"
data-center-mode="true"
data-slides-show="3"
data-is-thumbs="true"
data-vertical="true"
data-focus-on-select="true"
data-nav-for="#paginationActiveBorderNav">
<div class="js-slide">
<img class="img-fluid u-slick--pagination-active-border__item" src="../assets/img/img36.jpg" alt="Image Description">
</div>
<div class="js-slide">
<img class="img-fluid u-slick--pagination-active-border__item" src="../assets/img/img37.jpg" alt="Image Description">
</div>
<div class="js-slide">
<img class="img-fluid u-slick--pagination-active-border__item" src="../assets/img/img38.jpg" alt="Image Description">
</div>
</div>
</div>
<div class="col-10">
<div id="paginationActiveBorderNav" class="js-slick-carousel u-slick"
data-infinite="true"
data-nav-for="#paginationActiveBorderThumb">
<div class="js-slide">
<img class="img-fluid" src="../assets/img/img24.jpg" alt="Image Description">
</div>
<div class="js-slide">
<img class="img-fluid" src="../assets/img/img25.jpg" alt="Image Description">
</div>
<div class="js-slide">
<img class="img-fluid" src="../assets/img/img26.jpg" alt="Image Description">
</div>
</div>
</div>
</div>
Bordered
.u-slick__pagination-bordered--white class must be used along with .u-slick__pagination-bordered as a modifier to provide white style pagination option.
<div class="js-slick-carousel u-slick"
data-infinite="true"
data-adaptive-height="true"
data-fade="true"
data-pagi-classes="u-slick__pagination-bordered mt-3 mb-0">
<div class="js-slide">
<img class="img-fluid" src="../assets/img/img24.jpg" alt="Image Description">
</div>
<div class="js-slide">
<img class="img-fluid" src="../assets/img/img25.jpg" alt="Image Description">
</div>
<div class="js-slide">
<img class="img-fluid" src="../assets/img/img26.jpg" alt="Image Description">
</div>
</div>
Simple
<div class="row align-items-lg-center">
<div class="col-lg-3 mb-7 mb-lg-0">
<div id="simpleSlickNavMain" class="js-slick-carousel u-slick u-slick--pagination-simple u-slick--transform-off"
data-infinite="true"
data-autoplay="true"
data-speed="7000"
data-slides-show="3"
data-adaptive-height="true"
data-vertical="true"
data-vertical-swiping="true"
data-focus-on-select="true"
data-nav-for="#simpleSlickNavThumb">
<div class="js-slide u-slick--pagination-simple__item">
<div class="media">
<span class="u-slick--pagination-simple__icon rounded-circle mr-3">
<span class="u-slick--pagination-simple__icon-inner">1</span>
</span>
<div class="media-body">
<h4 class="h6 u-slick--pagination-simple__title">Title goes here</h4>
<p class="u-slick--pagination-simple__text">Text goes here</p>
</div>
</div>
</div>
<div class="js-slide u-slick--pagination-simple__item">
<div class="media">
<span class="u-slick--pagination-simple__icon rounded-circle mr-3">
<span class="u-slick--pagination-simple__icon-inner">2</span>
</span>
<div class="media-body">
<h4 class="h6 u-slick--pagination-simple__title">Title goes here</h4>
<p class="u-slick--pagination-simple__text">Text goes here</p>
</div>
</div>
</div>
<div class="js-slide u-slick--pagination-simple__item">
<div class="media">
<span class="u-slick--pagination-simple__icon rounded-circle mr-3">
<span class="u-slick--pagination-simple__icon-inner">3</span>
</span>
<div class="media-body">
<h4 class="h6 u-slick--pagination-simple__title">Title goes here</h4>
<p class="u-slick--pagination-simple__text">Text goes here</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-9">
<div id="simpleSlickNavThumb" class="js-slick-carousel u-slick"
data-infinite="true"
data-autoplay="true"
data-speed="7000"
data-fade="true"
data-is-thumbs="true"
data-nav-for="#simpleSlickNavMain">
<div class="js-slide">
<img class="img-fluid" src="../assets/img/img24.jpg" alt="Image Description">
</div>
<div class="js-slide">
<img class="img-fluid" src="../assets/img/img25.jpg" alt="Image Description">
</div>
<div class="js-slide">
<img class="img-fluid" src="../assets/img/img26.jpg" alt="Image Description">
</div>
</div>
</div>
</div>
Numbered paginations
Paging v1
Wrap the slider with an element that declares position: relative;, include the carousel and .u-slick__paging-v1 class and tie them with the same ID or class and give this naming in the data-numbered-pagination="" attribute.
<div class="position-relative">
<div class="js-slick-carousel u-slick"
data-numbered-pagination="#slickPagingV1">
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img24.jpg);">
<div class="space-5">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img25.jpg);">
<div class="space-5">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img26.jpg);">
<div class="space-5">
</div>
</div>
</div>
<div class="container position-relative">
<div id="slickPagingV1" class="u-slick__paging-v1"></div>
</div>
</div>
Equal height
With the use of .u-slick--equal-height class, turn your carousel contents into equal height blocks.
<div class="js-slick-carousel u-slick u-slick--equal-height u-slick--gutters-1"
data-adaptive-height="true"
data-arrows-classes="d-none d-lg-inline-block u-slick__arrow-classic u-slick__arrow-centered--y rounded-circle"
data-arrow-left-classes="fa fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
data-arrow-right-classes="fa fa-arrow-right u-slick__arrow-classic-inner u-slick__arrow-classic-inner--right mr-lg-2 mr-xl-4">
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img35.jpg);">
<div class="w-100 text-center space-3">
<h4 class="text-white">Slide heading</h4>
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img35.jpg);">
<div class="w-100 text-center space-3">
<h4 class="text-white">Slide heading</h4>
<p class="text-white mb-0">Slide text</p>
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img35.jpg);">
<div class="w-100 text-center space-3">
<h4 class="text-white">Slide heading</h4>
<p class="text-white mb-0">Slide text</p>
<p class="text-white mb-0">and some more text...</p>
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img35.jpg);">
<div class="w-100 text-center space-3">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img35.jpg);">
<div class="w-100 text-center space-3">
<h4 class="text-white">Slide heading</h4>
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img35.jpg);">
<div class="w-100 text-center space-3">
<h4 class="text-white">Slide heading</h4>
<p class="text-white mb-0">Slide text</p>
<p class="text-white mb-0">and some more text...</p>
</div>
</div>
</div>
Others
There are a couple of other predefined classes to make carousel contents easy to control and decorate them with some stylish design.
| Class | Description |
|---|---|
|
|
Adds 4px spacing between slides. |
|
|
Adds 8px spacing between slides. |
|
|
Adds 16px spacing between slides. |
Methods
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-nav-for="".
| Attribute | Description |
|---|---|
|
|
The ID of the carousel with which it will be synchronized. |
|
|
Set to true, to preview for the other carousel. |
|
|
Lists the common classes for prev and next. |
|
|
Lists the common classes for prev. |
|
|
Lists the common classes for next. |
|
|
Lists the common classes for pagination. |
|
|
If data-numbered-pagination="true" is set to true, then it is a preview for the other carousel. List of classes to control the style of numbered pagination:
|
|
|
Inserts additional <span class="u-dots-helper"></span> markup for. |
|
|
An auxiliary icon for pagination. |
|
|
The amount of default slides. |
|
|
The number of slides scrolled at a time. |
|
|
If true, the automatic slide switch is turned on. |
|
|
Animation smoothness. Possible values:
|
|
|
Animation smoothness if you use the jquery.easing.js libraries For more detailed information, ses jQuery easing documentation. |
|
|
If true, the slide effect is replaced by fade. |
|
|
If data-autoplay="" is set to true, it sets the time at which the next slide will be displayed. The value is in ms. |
|
|
Number of rows in a slide |
|
|
If true, the carousel is always centered, and the central slide is always visible, and the rest can go beyond the visibility zone. |
|
|
If data-center-mode="" is set to true, determines how many pixels the last slides are visible. |
|
|
If set to true, pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won't pause it. |
|
|
If true, you can specify slides of different widths. |
|
|
Specifies which slide will be the starting one, that is if it is necessary for the slider to start to scroll not from the first slide. |
|
|
If true, the slides are scrolled vertically. |
|
|
If true, slides are scrolled from right-to-left (RTL).
Note! You will need to add |
|
|
Revealing effect of slides. All effects are tied to the library animate.css. |
|
|
Disappearing effect of slides. All effects are tied to the library animate.css. |
|
|
If true, the slides are looped. |
|
|
If true, adds a slide title to the inside of the dot pagination. |
|
|
If true, after clicking on a slide, it becomes central. |
|
|
Image loading mode. It has 2 values:
data-lazy attribute, instead of src.
|
|
|
If data-adaptive-height="" is set to true, auto height mode will be enabled. |
|
|
Allows you to change the values of different parameters at different resolutions. |
Official Documentation
For more detailed information, see the official documentation: Slick carousel.