Is it possible to unslick/hide a Slick slider for desktops but slick/show it for mobile devices?
Much cleaner solution than the currently accepted answer: Add the mobileFirst: true,
option:
$('.slider').slick({
slidesToShow: 5,
slidesToScroll: 1,
autoplay: false,
autoplaySpeed: 2000,
mobileFirst: true,
responsive: [
{
breakpoint: 767,
settings: "unslick"
}
]
});
This will interpret your breakpoint settings starting from low resolutions, as intended.
See the settings section in the Slick documentation.
Try this: screen width 9999px to 768px will not be slider
('.slider').slick({ slidesToShow: 5, slidesToScroll: 1, autoplay: false, autoplaySpeed: 2000, responsive: [ { breakpoint: 9999, settings: "unslick" }, { breakpoint: 767, settings: { slidesToShow: 3, slidesToScroll: 3, infinite: true, dots: true } } ] });
Unfortunately my version of #user1506075 did not work without errors. I solved the problem this way:
$slickGreen = false;
function greenSlider(){
if($(window).width() < 991){
if(!$slickGreen){
$(".greenSlider").slick({
dots: false,
arrows: false,
slidesToShow: 3,
slidesToScroll: 1
});
$slickGreen = true;
}
} else if($(window).width() > 992){
if($slickGreen){
$('.greenSlider').slick('unslick');
$slickGreen = false;
}
}
};
$(document).ready(function(){
....
greenSlider();
});
$(window).on('resize', function(){
....
greenSlider();
});