slick.jsでフリックの動作が効かないときの対応メモ

スライダー系プラグインで有名な「slick.js」ですが、 ios10以降がインストールされているiphoneで、フリック(横にスライドする動作)が効かない不具合(バグ)があります。 その解決方法をメモします。 ページ内部、または外部のjsファイル内に、 slickのタグが以下のように記載されているとして、
$(window).load(function () {
    "use strict";
    $('.slider').slick({
        arrows: true,
        dots: true,
        slidesToShow: 3,
        slidesToScroll: 3,
        focusOnSelect: true,
        lazyLoad: 'progressive',
    });
});
その下に以下のタグを記載すると、フリックが出来るようになります。
$(window).load(function () {
    "use strict";
    $('.slick-slide').bind('touchstart', function(){
      return true;
    });
});
もし、slickで読み込む画像を外部ファイルなどを使い読み込み、 時差がある場合は、 setTimeoutを使い、時間をずらすと、 フリックが効きます。
$(window).load(function () {
    "use strict";
    setTimeout(function() {
        $('.slick-slide').bind('touchstart', function(){
          return true;
        });
    }, 5000 //秒数);
});
参考サイト https://github.com/kenwheeler/slick/issues/2677

人気記事ランキング

投稿者:

kishiken

企業務めのWEBデザイナーです。