Simple
$('.js-slick-home').slick({
infinite: false, //Loop
autoplay: true,
autoplaySpeed: 3000,
// centerPadding: '40px',
dots: true,
slidesToShow: 3,
slidesToScroll: 3,
prevArrow: '',
nextArrow: '',
// vertical: true,
// verticalSwiping: true,
responsive: [
{
breakpoint: 1200,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 576,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
Multiple Slick Sliders
$('.js-slider-for').each(function (key, item) {
var sliderIdName = 'slider' + key;
var sliderNavIdName = 'sliderNav' + key;
this.id = sliderIdName;
$('.js-slider-nav')[key].id = sliderNavIdName;
var sliderId = '#' + sliderIdName;
var sliderNavId = '#' + sliderNavIdName;
$(sliderId).slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
infinite: false,
autoplay: true,
autoplaySpeed: 3000,
prevArrow: '',
nextArrow: '',
asNavFor: sliderNavId
});
$(sliderNavId).slick({
slidesToShow: 3,
asNavFor: sliderId,
autoplay: true,
dots: false,
centerPadding: '60px',
arrows: false,
infinite: false,
focusOnSelect: true
});
});
