スライダー系プラグインで有名な「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