48
rated 0 times
[
50]
[
2]
/ answers: 1 / hits: 6237
/ 4 Years ago, wed, october 21, 2020, 12:00:00
I am creating a slider using slick. When I am using two div tags inside the slick container, the horizontal scroll bar is not apperaing. But when I am using more than two divs inside slick the horizontal scroll bar is appearing. I have putted the slick code inside the container-fluid.
Html code
<section class="bg-white py-5">
<div class="container-fluid">
<div class="cust-slider">
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
</div>
</section>
JavaScript
$('.cust-slider').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 2,
slidesToScroll: 1,
responsive: [{
breakpoint: 1000,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
infinite: true,
dots: true
}
}, {
breakpoint: 860,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}, {
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}]
}, {
autoplay: true,
autoplaySpeed: 6000,
});
Image
See image here
More From » css