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 for arrow classes. Use within data-arrows-classes
attribute.
Arrow classic
.u-slick__arrow-classic
class provides white air style icon buttons.
In addition, .u-slick__arrow--offset
class can be added to offset left and right arrows for 40px
out of the container for only large and above devices.
<div
data-arrows-classes="u-slick__arrow-classic u-slick__arrow-centered--y rounded-circle"
data-arrow-left-classes="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>
Vertical pagination style
Also with additional classes like, .u-slick__pagination-centered--y
and .u-slick__pagination--block
can be turned into vertically positioned style.
<div class="js-slick-carousel u-slick"
data-vertical="true"
data-pagi-classes="position-absolute right-0 u-slick__pagination u-slick__pagination--block u-slick__pagination-centered--y u-slick__pagination--white mr-5">
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img24.jpg);">
<div class="space-5">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img25.jpg);">
<div class="space-5">
</div>
</div>
<div class="js-slide bg-img-hero-center" style="background-image: url(../assets/img/img26.jpg);">
<div class="space-5">
</div>
</div>
</div>
Modern pagination
.u-slick--pagination-modern
is another pagination style that provides modern look of pagination style.
<div id="paginationModernNav" class="js-slick-carousel u-slick mb-2"
data-infinite="true"
data-autoplay="true"
data-speed="5000"
data-fade="true"
data-nav-for="#paginationModernThumb">
<div class="js-slide">
<img class="img-fluid" src="../assets/img/img24.jpg" alt="Image Description">
</div>
<div class="js-slide">
<img class="img-fluid" src="../assets/img/img25.jpg" alt="Image Description">
</div>
<div class="js-slide">
<img class="img-fluid" src="../assets/img/img26.jpg" alt="Image Description">
</div>
</div>
<div id="paginationModernThumb" class="js-slick-carousel u-slick u-slick--pagination-modern u-slick--transform-off mx-auto"
data-infinite="true"
data-autoplay="true"
data-speed="5000"
data-center-mode="true"
data-slides-show="3"
data-is-thumbs="true"
data-focus-on-select="true"
data-nav-for="#paginationModernNav">
<div class="js-slide">
<img class="u-avatar rounded-circle mx-auto" src="../assets/img/img36.jpg" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-avatar rounded-circle mx-auto" src="../assets/img/img37.jpg" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-avatar rounded-circle mx-auto" src="../assets/img/img38.jpg" alt="Image Description">
</div>
</div>
Numbered paginations
Paging v1
Wrap the slider with an element that declares position: relative;
, include the carousel and .u-slick__paging-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.