![パソ君](https://jito-site.com/wp-content/uploads/2022/02/computer09_question.png)
パソ君
・slickのスライダーをスマホのみ無効にしたい?
こんな疑問にお答えします。
デザインカンプによっては、PCはスライダーでもスマホ時は無効にしたいときありますよね。
実はそれ簡単に実装可能です。
![ジト](https://jito-site.com/wp-content/uploads/2022/02/image.jpg)
ジト
すぐにできるよ!
ということで、この記事では「slickのスライダーをスマホのみ無効にする」について解説していきます!
この記事でわかること
slickのスライダーをスマホのみ無効にする
![](https://jito-site.com/wp-content/uploads/2023/01/f386510f79db6e55890aab5cd5f929ea-160x160.png)
【解決】slickのスライダーをスマホのみ無効にする【コピペOK】
そんなスマホのみスライダーを無効にしたサンプルがこちら↓
HTMLやCSSをクリックして、横幅を小さくしてみてください!
See the Pen slick左右透過➁ by jito-coder (@jito-coder) on CodePen.
下記のように横幅を変えると、slickが無効になります。
![](https://jito-site.com/wp-content/uploads/2023/06/20230618_111319.gif)
重要なコードとしてはjQuery部分ですね。
それがこちら↓
$(function () {
$(".test-slick").slick({
dots: true,
arrows: false,
autoplay: true,
centerMode: true,
centerPadding: "8%",
slidesToShow: 1,
responsive: [
{
breakpoint: 640,
settings: "unslick",
},
],
});
});
$(window).on("resize orientationchange", function () {
$(".test-slick").slick("resize");
});
「responsive」オプションを使い、640px以下になったら「unslick」を指定しています。
「unslick」を指定することで、slickを破棄できちゃいます。
つまり横幅が640px以下だったら、スライダーを無効にするということですね。
また最後の3行、下記部分が重要です↓
$(window).on("resize orientationchange", function () {
$(".test-slick").slick("resize");
});
これによりウインドウの横幅が変わるたび、もしくは端末が回転したときにスライダーを再調整してくれます。
【解決】slickのスライダーをスマホのみ無効にする【コピペOK】:まとめ
- 「responsive」オプションを使う
- 「unslick」を指定することでスライダーを無効に
![ジト](https://jito-site.com/wp-content/uploads/2022/02/image.jpg)
ジト
スマホのみスライダーを無効にしたいときは試してみてね!
![](https://jito-site.com/wp-content/uploads/2023/06/c49a34cae557e2e3f37825d2c8094dac-160x160.png)
![](https://jito-site.com/wp-content/uploads/2023/06/b93d3542fadd7bbb24bab10a4dbf4d98-160x160.png)