web-dev-qa-db-ja.com

これはデスクトップで滑らかになり、モバイルで滑らかなスライドにできますか？

デスクトップではスライダーを無効にしたいのですが、モバイルではスライドが必要です。助けてください。

$('.slider').slick({
     slidesToShow: 5,
     slidesToScroll: 1,
     autoplay: false,
     autoplaySpeed: 2000,
     responsive: [
        {
           breakpoint: 767,
           settings: "unslick"
        }
     ]
  });
jquerysliderslick.js
7
Shahadat

これを試してください：画面幅9999pxから768pxはスライダーになりません

（ '。slider'）。slick（{
 slidesToShow：5、
 slidesToScroll：1、
 autoplay：false、
 autoplaySpeed：2000 、[。 。]ブレークポイント：767、
 settings：{
 slidesToShow：3、
 slidesToScroll：3、
 infinite：true、
 dots：true 
} 
} 
 
}）;
11
user1506075

現在受け入れられている答えよりもはるかにクリーンなソリューション：mobileFirst: true,オプション：

$('.slider').slick({
     slidesToShow: 5,
     slidesToScroll: 1,
     autoplay: false,
     autoplaySpeed: 2000,
     mobileFirst: true,
     responsive: [
        {
           breakpoint: 767,
           settings: "unslick"
        }
     ]
  });

これにより、必要に応じて、低解像度からブレークポイント設定が解釈されます。

Slick documentation の設定セクションを参照してください。

19
Tobias Geisler

残念ながら、＃user1506075の私のバージョンはエラーなしで機能しませんでした。私はこの方法で問題を解決しました：

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

私は同様の問題を抱えていました enquire.js （軽量-約0.8kb、CSSメディアクエリに応答するための純粋なJavaScriptライブラリ）で解決しました

このGitHubスレッドでの議論と このコメント に基づいて、enquire.jsを使用して次のようにソリューションを実装しました。

$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');
    }
  }
});

SliderSettingsは、あなたの場合のようなオプションマップです：

{
 slidesToShow: 5,
 slidesToScroll: 1,
 autoplay: false,
 autoplaySpeed: 2000
}
0
Oksana Romaniv

以下のようなif内にコードを配置します。

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

参照先:: link

0
Rana Ghosh