HTML/CSS

2020.09.15

jQuery + Slick｜スマホの時だけスライダーにしたり表示数を変えたりする方法

この記事は1318日前に投稿されたものです。

Slickはスライダーを制作するのに便利なjQueryプラグインです。Slickを使用したスライダーで、スマホとPCでの表示を変える方法です。

Slickのダウンロードはこちらです。

slick - the last carousel you'll ever need
slick is a responsive carousel jQuery plugin that supports m…
https://kenwheeler.github.io/slick/

Slickの基本的な使い方

ダウンロードした中にはいろいろ入っていると思いますが、最低限必要なのは下記のものだけ。
・slick/slick_min.js
・slick/slick.css
・slick/slick-theme.css
・slick/fonts（フォルダ）
・slick/ajax-loader.gif

必要ファイルの読み込み（jQueryも）

<link rel="stylesheet" href="slick/slick.css"/>
<link rel="stylesheet" href="slick/slick-theme.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="slick/slick.min.js"></script>

html スライダー作成

<div class="slider">　<!-- クラス名はなんでもOK -->
    <div><img src="img01.jpg" alt="image01"></div>
    <div><img src="img02.jpg" alt="image02"></div>
    <div><img src="img03.jpg" alt="image03"></div>
</div>

<script>
    $('.slider').slick();
</script>

これだけでスライダーは完成です。
ナビを表示したり、表示数を増やしたりなどはオプションで設定して行きます。

PCとスマホでオプションを変更する場合

ここから本題です。breakpointでサイズを指定して振り分けます。それぞれにオプションを設定すればOK！
下記コードの場合はmobileFirstのオプションを設定しているので、768px以上で振り分けされます。

.sliderというクラスをつけた場合

$('.slider').slick({
  mobileFirst: true,
  slidesToShow: 2,
  slidesToScroll: 2,
  autoplay: true,
  responsive: [{
    breakpoint: 768,　
    settings: {
      dots: true,
      slidesToShow: 5,
      slidesToScroll: 1,　　　　　　　　　　
      autoplay: true
     }
 }]
});

スマホの時だけスライダーを表示

breakepointで振り分けたときにunslickだけではダメなのようで、リサイズした時にイベントを実行させる必要があります。

.sliderというクラスをつけた場合

 $('.slider').slick({
    mobileFirst: true,
    slidesToShow: 2,
    slidesToScroll: 2,
    responsive: [ {
        breakpoint: 768,
        settings: 'unslick'
    } ]
});
//リサイズした時に実行
$(window).on('resize orientationchange', function() {
　　$('.slider').slick('resize');
});

参考：https://github.com/kenwheeler/slick/issues/2123