web-dev-qa-db-fra.com

Est-ce que cela est possible de décoller dans le bureau et de glisser en glissant dans le mobile?

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"
        }
     ]
  });
jquerysliderslick.js
5
Shahadat

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 
} 
} 
] 
});
7
user1506075

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 .

6
Tobias Geisler

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();
    });
2
Николай Пушкин

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
}
0
Oksana Romaniv

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

0
Rana Ghosh