Slick Carousel
the last carousel you'll ever need. A slideshow component for cycling through elements—images or slides of text—like a carousel.
Official Documentation
Please Note: we already added plugin CSS and JS file in
vendors.bundle.{css/js}. you can exclude it by using gulp task. you also can
add them manually if you want.
How it works
.slick-carousel class initialize the slider. it also works as a wrapper container. also you
can add slick arrows and dots modifier classes. pass
settings
option using HTML5
data-slick='{ }' attribute.
<div class="slick-carousel" data-slick='{ "slidesToShow":3, "slidesToScroll":2, "dots":true, "responsive":[
{ "breakpoint": 1024, "settings": { "slidesToShow": 3, "slidesToScroll": 3, "infinite": true, "dots": true } },
{ "breakpoint": 600, "settings": { "slidesToShow": 2, "slidesToScroll": 2 } },
{ "breakpoint": 480, "settings": { "slidesToShow": 1, "slidesToScroll": 1 } }
]}'>
<div class="item">
//image/text/any media object
</div>
<div class="item">
//image/text/any media object
</div>
<div class="item">
//image/text/any media object
</div>
<div class="item">
//image/text/any media object
</div>
</div>
Single Item
<div class="slick-carousel"
data-slick='{"arrows":true, "dots":true, "dotsClass":"slick-dots text-center"}'>
<img src="https://dummyimage.com/800x350/eaeaea/000000.jpg&text=Slide+1" alt="">
<img src="https://dummyimage.com/800x350/eaeaea/000000.jpg&text=Slide+2" alt="">
<img src="https://dummyimage.com/800x350/eaeaea/000000.jpg&text=Slide+3" alt="">
</div>
Multiple Items
<div class="slick-carousel arrow-classic" data-slick='{ "arrows":true, "slidesToShow":3, "slidesToScroll":2, "responsive":[
{ "breakpoint": 1024, "settings": { "slidesToShow": 3, "slidesToScroll": 3, "infinite": true, "dots": true } },
{ "breakpoint": 600, "settings": { "slidesToShow": 2, "slidesToScroll": 2 } },
{ "breakpoint": 480, "settings": { "slidesToShow": 1, "slidesToScroll": 1 } }
]}' data-slick-margin="15">
<div class="item">
<img src="https://via.placeholder.com/400/eaeaea/000000/?text=Slide 1" alt="">
</div>
<div class="item">
<img src="https://via.placeholder.com/400/eaeaea/000000/?text=Slide 2" alt="">
</div>
<div class="item">
<img src="https://via.placeholder.com/400/eaeaea/000000/?text=Slide 3" alt="">
</div>
<div class="item">
<img src="https://via.placeholder.com/400/eaeaea/000000/?text=Slide 4" alt="">
</div>
</div>Center Mode
<div class="slick-carousel" data-slick='{ "slidesToShow":1, "slidesToScroll":1, "centerMode": true, "arrows":true, "centerPadding":"100px", "responsive":[{
"breakpoint": 992,
"settings": {
"centerPadding": "120px"
}
}, {
"breakpoint": 768,
"settings": {
"centerPadding": "80px"
}
}, {
"breakpoint": 554,
"settings": {
"centerPadding": "50px"
}
}]}' data-slick-margin="5">
<div class="item">
<img src="https://via.placeholder.com/1200x500/eaeaea/000000/?text=Slide 1" alt="">
</div>
<div class="item">
<img src="https://via.placeholder.com/1200x500/eaeaea/000000/?text=Slide 2" alt="">
</div>
<div class="item">
<img src="https://via.placeholder.com/1200x500/eaeaea/000000/?text=Slide 3" alt="">
</div>
<div class="item">
<img src="https://via.placeholder.com/1200x500/eaeaea/000000/?text=Slide 4" alt="">
</div>
</div>Adaptive Height
Look ma!
Check
this out!
Woo
<div class="slick-carousel" data-slick='{"arrows":true, "adaptiveHeight":true}'>
<div class="item">
<img src="https://dummyimage.com/1200x400/eaeaea/000000.jpg&text=Slide+1" alt="">
</div>
<div class="item">
<img src="https://dummyimage.com/1200x400/eaeaea/000000.jpg&text=Slide+2" alt="">
<p class="text-center mt-2">Look ma!</p>
</div>
<div class="item">
<img src="https://dummyimage.com/1200x400/eaeaea/000000.jpg&text=Slide+3" alt="">
<p class="text-center mt-2">Check
<br />this out!</p>
</div>
<div class="item">
<img src="https://dummyimage.com/1200x400/eaeaea/000000.jpg&text=Slide+4" alt="">
<p class="text-center mt-2">Woo</p>
</div>
</div>
Variable Width
<div class="slick-carousel"
data-slick='{"variableWidth":true, "arrows":true, "slidesToShow":3, "slidesToScroll":2}'
data-slick-margin="15">
<div class="item">
<img src="https://via.placeholder.com/400/eaeaea/000000/?text=Slide 1" alt="">
</div>
<div class="item">
<img src="https://via.placeholder.com/300X400/eaeaea/000000/?text=Slide 2" alt="">
</div>
<div class="item">
<img src="https://via.placeholder.com/400/eaeaea/000000/?text=Slide 3" alt="">
</div>
<div class="item">
<img src="https://via.placeholder.com/300X400/eaeaea/000000/?text=Slide 4" alt="">
</div>
<div class="item">
<img src="https://via.placeholder.com/400/eaeaea/000000/?text=Slide 5" alt="">
</div>
</div>Slider Syncing
<div class="slick-carousel slider-for"
data-slick='{"slidesToShow":1,"slidesToScroll":1,"asNavFor":".slider-nav", "arrows":true}'>
<div class="item">
<img src="https://dummyimage.com/1200x500/eaeaea/000000.jpg&text=Slide+1" alt="">
</div>
<div class="item">
<img src="https://dummyimage.com/1200x500/eaeaea/000000.jpg&text=Slide+2" alt="">
</div>
<div class="item">
<img src="https://dummyimage.com/1200x500/eaeaea/000000.jpg&text=Slide+3" alt="">
</div>
<div class="item">
<img src="https://dummyimage.com/1200x500/eaeaea/000000.jpg&text=Slide+4" alt="">
</div>
<div class="item">
<img src="https://dummyimage.com/1200x500/eaeaea/000000.jpg&text=Slide+5" alt="">
</div>
<div class="item">
<img src="https://dummyimage.com/1200x500/eaeaea/000000.jpg&text=Slide+6" alt="">
</div>
</div>
<div class="slick-carousel slider-nav mt-2"
data-slick='{"slidesToShow":3,"slidesToScroll":1,"asNavFor":".slider-for","focusOnSelect":true,"centerMode":true,"centerPadding":"0","responsive":[{"breakpoint":767,"settings":{"slidesToShow":2}}]}'
data-slick-margin="5">
<img src="https://dummyimage.com/500X300/eaeaea/000000.jpg&text=Slide+1" alt="">
<img src="https://dummyimage.com/500X300/eaeaea/000000.jpg&text=Slide+2" alt="">
<img src="https://dummyimage.com/500X300/eaeaea/000000.jpg&text=Slide+3" alt="">
<img src="https://dummyimage.com/500X300/eaeaea/000000.jpg&text=Slide+4" alt="">
<img src="https://dummyimage.com/500X300/eaeaea/000000.jpg&text=Slide+5" alt="">
<img src="https://dummyimage.com/500X300/eaeaea/000000.jpg&text=Slide+6" alt="">
</div>Settings option
You can also pass an optional settings object. below listed default settings
$('.slick-carousel').slick({
slidesToShow:1, # of slides to show
slidesToScroll:1, # of slides to scroll
accessibility:true, // Enables tabbing and arrow key navigation
adaptiveHeight:false, // Enables adaptive height for single slide horizontal carousels.
autoplay:false, // Enables Autoplay
autoplaySpeed:3000, // Autoplay Speed in milliseconds
arrows:false // Prev/Next Arrows
asNavFor:null, // Set the slider to be the navigation of other slider (Class or ID Name)
appendArrows:"$(element)" // Change where the navigation arrows are attached (Selector, htmlString, Array, Element, jQuery object)
appendDots:"$(element)" // Change where the navigation dots are attached (Selector, htmlString, Array, Element, jQuery object)
prevArrow:'html string' // Allows you to select a node or customize the HTML for the "Previous" arrow.
centerMode:false, //Enables centered view with partial prev/next slides. Use with odd numbered slidesToShow counts.
centerPadding:"50px", // Side padding when in center mode (px or %)
cssEase:'ease', // CSS3 Animation
customPaging:function(){ return "html string"} // Custom paging templates. See source for use example.
dots:false // Show dot indicators
dotsClass:'slick-dots', //Class for slide indicator dots container
draggable:true, // Enable mouse dragging
fade:false, // Enable fade
focusOnSelect:false, // Enable focus on selected element (click)
easing:'linear', // Add easing for jQuery animate. Use with easing libraries or default easing methods
edgeFriction: 0.15, // Resistance when swiping edges of non-infinite carousels
infinite: true, // Infinite loop sliding
initialSlide:0, // Slide to start on
lazyLoad:ondemand, // Set lazy loading technique. Accepts 'ondemand' or 'progressive'
mobileFirst:false, // Responsive settings use mobile first calculation
pauseOnFocus:true, // Pause Autoplay On Focus
pauseOnHover:true, // Pause Autoplay On Hover
pauseOnDotsHover:false, // Pause Autoplay when a dot is hovered
respondTo:'window', // Width that responsive object responds to. Can be 'window', 'slider' or 'min' (the smaller of the two)
responsive:[object] // Object containing breakpoints and settings objects (see demo). Enables settings sets at given screen width. Set settings to "unslick" instead of an object to disable slick at a given breakpoint.
rows:1, // Setting this to more than 1 initializes grid mode. Use slidesPerRow to set how many slides should be in each row.
speed:300, // Slide/Fade animation speed
touchMove:true, // Enable slide motion with touch
variableWidth:false, // Variable width slides
vertical:false, // Vertical slide mode
})