Carousel Sliders
This slider plugin is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!
For more informations about options & methods you can visit official website here: Slide Documentation.
Single Item
<div class="slick" data-arrows="true">
<div class="slide">
<h3>1</h3>
</div>
<div class="slide">
<h3>2</h3>
</div>
<div class="slide">
<h3>3</h3>
</div>
</div>
Multiple Items
<div class="widget widget_slider">
<div class="slick" data-arrows="true" data-num-slides="3" data-num-scroll="3">
<div class="slide">
<h3>1</h3>
</div>
// ... Other slides
</div>
</div>
Responsive Display
$('.responsive').slick({
dots: true, infinite: false, speed: 300, slidesToShow: 4, slidesToScroll: 4,
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
}
}
]
});
Variable Width
<div class="slick" data-variable-width="true" data-center="true">
<!-- Don't forget to specify width for each slide -->
<div class="slide" style="width:200px">
<h3>200</h3>
</div>
// ... Other slides
</div>
Fade Effect
<div class="slick" data-fade="true">
<div class="slide">
<h3 class="bg-primary">1</h3>
</div>
<div class="slide">
<h3 class="bg-primary">2</h3>
</div>
<div class="slide">
<h3 class="bg-primary">3</h3>
</div>
</div>
Autoplay False
<div class="slick" data-autoplay="false">
<div class="slide">
<h3 class="bg-primary">1</h3>
</div>
<div class="slide">
<h3 class="bg-primary">2</h3>
</div>
<div class="slide">
<h3 class="bg-primary">3</h3>
</div>
</div>
No Arrow
<div class="slick" data-autoplay="false">
<div class="slide">
<h3 class="bg-primary">1</h3>
</div>
<div class="slide">
<h3 class="bg-primary">2</h3>
</div>
<div class="slide">
<h3 class="bg-primary">3</h3>
</div>
</div>
