- How it works
- How to use?
-
Examples
- Image Slides only
- Text slides only
- With controls
- With pagination
- With numbered pagination
- Autoplay
- Infinite
- With rows
- With animation
- Crossfade
- Vertical
- Multiple items
- Variable width
- Adaptive height
- Responsive display
- Center mode
- Center slides
- Slider syncing
- Thumb progress
- No transition
- Right-to-left (RTL)
- Helpers
- JavaScript behavior
Slick Carousel
A slideshow component for cycling through elements—images or slides of text—like a carousel.
How it works
Front 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.
Official documentation
For more detailed information and examples, see the official documentation: Slick carousel.
How to use?
Copy-paste the stylesheet <link> into your <head> to load the CSS.
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
Copy-paste the following <script>s near the end of your pages under JS Implementing Plugins to enable them.
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
Copy-paste the following <script> near the end of your pages under JS Front to enable it.
<script src="../../assets/js/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="fas fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
data-arrow-right-classes="fas 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="fas fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
data-arrow-right-classes="fas 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"></div>
</div>
</div>
Autoplay
<div class="js-slick-carousel u-slick"
data-autoplay="true"
data-autoplay-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-autoplay-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="fas fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
data-arrow-right-classes="fas 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="fas fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
data-arrow-right-classes="fas 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="fas fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
data-arrow-right-classes="fas 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="fas fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
data-arrow-right-classes="fas 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="fas fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
data-arrow-right-classes="fas 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="fas fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
data-arrow-right-classes="fas 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="fas fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
data-arrow-right-classes="fas 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="fas fa-arrow-left u-slick__arrow-inner u-slick__arrow-inner--left ml-lg-2 ml-xl-4"
data-arrow-right-classes="fas 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="fas fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
data-arrow-right-classes="fas 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>
Thumb progress
<div id="thumbProgress" class="js-slick-carousel u-slick mb-3"
data-nav-for="#thumbProgressNav">
<div class="js-slide">
<img class="img-fluid w-100" src="../assets/img/img27.jpg" alt="Image Description">
</div>
<div class="js-slide">
<img class="img-fluid w-100" src="../assets/img/img28.jpg" alt="Image Description">
</div>
<div class="js-slide">
<img class="img-fluid w-100" src="../assets/img/img29.jpg" alt="Image Description">
</div>
<div class="js-slide">
<img class="img-fluid w-100" src="../assets/img/img30.jpg" alt="Image Description">
</div>
<div class="js-slide">
<img class="img-fluid w-100" src="../assets/img/img31.jpg" alt="Image Description">
</div>
</div>
<div id="thumbProgressNav" class="js-slick-carousel u-slick u-slick--transform-off max-width-27 mx-auto"
data-slides-show="3"
data-is-thumbs="true"
data-is-thumbs-progress="true"
data-thumbs-progress-options='{
"color": "#377dff",
"width": 8
}'
data-thumbs-progress-container=".js-slick-thumb-progress"
data-nav-for="#thumbProgress">
<div class="js-slide p-1">
<a class="js-slick-thumb-progress position-relative d-block u-avatar border rounded-circle p-1" href="javascript:;">
<img class="img-fluid rounded-circle" src="../assets/img/img36.jpg" alt="Image Description">
</a>
</div>
<div class="js-slide p-1">
<a class="js-slick-thumb-progress position-relative d-block u-avatar border rounded-circle p-1" href="javascript:;">
<img class="img-fluid rounded-circle" src="../assets/img/img37.jpg" alt="Image Description">
</a>
</div>
<div class="js-slide p-1">
<a class="js-slick-thumb-progress position-relative d-block u-avatar border rounded-circle p-1" href="javascript:;">
<img class="img-fluid rounded-circle" src="../assets/img/img38.jpg" alt="Image Description">
</a>
</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="fas fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
data-arrow-right-classes="fas 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="fas fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
data-arrow-right-classes="fas 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="fas fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
data-arrow-right-classes="fas 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="fas fa-arrow-left u-slick__arrow-inner u-slick__arrow-inner--left ml-lg-2 ml-xl-4"
data-arrow-right-classes="fas fa-arrow-right u-slick__arrow-inner u-slick__arrow-inner--right mr-lg-2 mr-xl-4">
</div>
.u-slick__arrow--flat to apply flat style arrows.
<div
data-arrows-classes="u-slick__arrow u-slick__arrow--flat u-slick__arrow-centered--y rounded-circle"
data-arrow-left-classes="fas fa-arrow-left u-slick__arrow-inner u-slick__arrow-inner--left ml-lg-2 ml-xl-4"
data-arrow-right-classes="fas fa-arrow-right u-slick__arrow-inner u-slick__arrow-inner--right mr-lg-2 mr-xl-4">
</div>
.u-slick__arrow--flat-white to apply white flat style arrows.
<div
data-arrows-classes="u-slick__arrow u-slick__arrow--flat-white u-slick__arrow-centered--y rounded-circle"
data-arrow-left-classes="fas fa-arrow-left u-slick__arrow-inner u-slick__arrow-inner--left ml-lg-2 ml-xl-4"
data-arrow-right-classes="fas 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 right-0 bottom-0 left-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 right-0 bottom-0 left-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-autoplay-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-autoplay-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>
Paging v1
Wrap the slider with an element that declares position: relative;, include the carousel and .u-slick__paging 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"></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="fas fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
data-arrow-right-classes="fas 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 15px 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. |
|
|
Set to true, to enable progress style pagination loader. |
|
|
It has 2 values:
|
|
|
Add class to which the progress will be linked and animated. |
|
|
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. |