カルーセルスライダーを実装する時、slick.jsを使うことも多いと思いますが、このslick.js、デフォルトの状態ではスマホでピンチイン、ピンチアウトが出来ないんです。
そこで今回は、スマホでピンチイン、ピンチアウトが出来る様にする方法をご紹介します。
目次
ピンチイン、ピンチアウトを出来なくしているのはtouch-action: pan-y;という
CSSです。
なので、slick.cssファイルを修正します。
slick.css
.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
/*下記2行を削除またはコメントアウトします*/
/* -ms-touch-action: pan-y;
touch-action: pan-y; */
-webkit-tap-highlight-color: transparent;
}
CDNで読み込んでいる場合はCSSに追加しましょう。
css
.slick-slider {
-ms-touch-action: auto;
touch-action: auto;
}
これだけでスマホでもピンチイン、ピンチアウトが出来るようになります。
猫田 ねこ
パチンコ店勤務からweb制作会社へ転職という異色の経歴。漫画大好き。アニメ大好き。パチンコ大好きな、ねこです。
【JavaScript】スマホで便利！tableの横スクロールが実装できる「ScrollHint」の使い方
【jQuery】チェックボックスの選択数を制限する方法
【jQuery】classの追加や削除ができるaddClass、removeClass、toggleClass
