Je veux désactiver le curseur dans le bureau, mais j'ai besoin de glisser dans le mobile, pouvez-vous m'aider?
$('.slider').slick({
slidesToShow: 5,
slidesToScroll: 1,
autoplay: false,
autoplaySpeed: 2000,
responsive: [
{
breakpoint: 767,
settings: "unslick"
}
]
});
Essayez ceci: la largeur de l'écran de 9999px à 768px ne sera pas un curseur
('. curseur'). slick ({ slidesToShow: 5, slidesToScroll: 1, autoplay: false, autoplaySpeed: 2000 , réactif: [ { point d'arrêt: 9999, paramètres: "unslick" }, { point d'arrêt: 767, paramètres: { slidesToShow: 3, slidesToScroll: 3, infinie: true, points: true } } ] });
Solution beaucoup plus propre que la réponse actuellement acceptée: ajoutez l'option mobileFirst: true,
:
$('.slider').slick({
slidesToShow: 5,
slidesToScroll: 1,
autoplay: false,
autoplaySpeed: 2000,
mobileFirst: true,
responsive: [
{
breakpoint: 767,
settings: "unslick"
}
]
});
Cela interprétera vos paramètres de point d'arrêt à partir de basses résolutions, comme vous le souhaitez.
Voir la section des paramètres dans la documentation Slick .
Malheureusement, ma version de # user1506075 ne fonctionnait pas sans erreurs. J'ai résolu le problème de cette façon:
$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();
});
J'ai eu un problème similaire et je l'ai résolu avec enquire.js (léger - environ 0,8 Ko, bibliothèque JavaScript pure pour répondre aux requêtes de médias CSS)
Basé sur la discussion dans ce fil GitHub et ce commentaire en particulier, j'ai implémenté la solution en utilisant enquire.js comme ceci:
$slider = $('#your-slider');
enquire.register('screen and (max-width: 767px)', {
match : function() {
if ( !$slider.hasClass('slick-initialized') ) {
$slider.slick(SliderSettings);
}
},
unmatch : function() {
if ( $slider.hasClass('slick-initialized') ) {
$slider.slick('unslick');
}
}
});
Où SliderSettings est la carte des options, comme dans votre cas:
{
slidesToShow: 5,
slidesToScroll: 1,
autoplay: false,
autoplaySpeed: 2000
}
Mettez votre code dans une if
comme ci-dessous ::
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
$('.slider').slick({
slidesToShow: 5,
slidesToScroll: 1,
autoplay: false,
autoplaySpeed: 2000,
responsive: [
{
breakpoint: 767,
settings: "unslick"
}
]
});
}
Prendre une référence de :: link