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デザイナーです。デザイン、コーディング、CMS構築と広く浅く活動中。過去にバンド活動を経験。神奈川出身。川崎市在住。【資格】html5プロフェッショナル認定試験 レベル1【趣味】音楽(ポストロック、エモ、USインディ、JPインディ)、DIY住宅リノベーション