¿Cómo puedo deshabilitar un control deslizante para resoluciones de escritorio pero mostrarlo en dispositivos móviles? El siguiente código solo permite lo contrario:
$('.slider').slick({ slidesToShow: 5, slidesToScroll: 1, autoplay: false, autoplaySpeed: 2000, responsive: [ { breakpoint: 767, settings: "unslick" } ] });Una solución mucho más limpia que la respuesta aceptada actualmente: agregue mobileFirst: true, option:
$('.slider').slick({ slidesToShow: 5, slidesToScroll: 1, autoplay: false, autoplaySpeed: 2000, mobileFirst: true, responsive: [ { breakpoint: 767, settings: "unslick" } ] });Esto interpretará la configuración de su punto de interrupción a partir de resoluciones bajas, según lo previsto.
Consulte la sección de configuración en la documentación de Slick .
Prueba esto: el ancho de pantalla de 9999 px a 768 px no se deslizará
('.slider').slick({
diapositivas para mostrar: 5,
diapositivas para desplazarse: 1,
reproducción automática: falso,
velocidad de reproducción automática: 2000,
receptivo: [
{
punto de interrupción: 9999,
ajustes: "deshacer"
},
{
punto de interrupción: 767,
ajustes: {
diapositivas para mostrar: 3,
diapositivas para desplazarse: 3,
infinito: cierto,
puntos: cierto
}
}
]
});
Desafortunadamente, mi versión de #user1506075 no funcionó sin errores. Resolví el problema de esta manera:
$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(); });