Вот работает. Но надо понимать, что это работает не так как хочется. И если сработал unslick, то надо перезагружаться страницу, чтоб он снова начал работать при большем размере окна.
$(".single-item").slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 3,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: "unslick"
}
]
});
Но это выглядит неплохо, но реализация могла бы быть и лучше. Поэтому вместо брейкпоинтов в конфиге, лучше самостоятельно контролировать процесс.
window.addEventListener("resize", function() {
if (window.innerWidth <= 768) {
$('.your-slider').slick('unslick');
sliderIsLive = false;
}
else {
if (sliderIsLive) {
$('.your-slider').slick();
sliderIsLive = true;
}
}
});
