Currently, I am using slick-slider to showcase content in 3 columns by utilizing flexbox. The aim is to have the slider activated only on mobile view. This means that when the screen size shrinks down to mobile view, the 3 column flexbox transforms into a slider displaying one slide at a time.
The issue arises when users switch back to desktop view; the slides do not return but instead appear stuck within the mobile slider view.
What I want ideally is for the slider to remain active until the user resizes the screen width to 649, and then disabled when it reaches back to 651.
$(slider).slick({
autoplay: true,
autoplaySpeed: 800,
slidesToShow: 3,
slidesToScroll: 3,
speed: 800,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
infinite: true,
dots: true
}
}, {
breakpoint: 650,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}],
});
$(window).on('resize', function() {
var win = $(this);
if (win.width() >= 650) {
$(slider).slick('unslick')
};
});