Slick carousel adaptive height not working
Slick adaptive height not working
by Faisal Khan Janjua
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
JavaScript
function sliderOptions(obj) {
var sliderOpts = {
dots: false,
speed: 300,
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
adaptiveHeight: true,
prevArrow:"<div class='hpb_slider_arrow slick-prev'></div>",
nextArrow:"<div class='hpb_slider_arrow slick-next'></div>",
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1
}
}
]
};
if(obj) {
Object.keys(obj).forEach(function(key) {
sliderOpts[key] = obj[key];
});
}
return sliderOpts;
}
console.log(sliderOptions({slidesToShow: 5, slidesToScroll: 2}));