【JavaScript】slickを用いて要素をスライドさせる（レスポンシブも）

2022年9月29日2022年10月1日

JavaScriptのプラグインslickを用いてスライドを作成する方法の備忘録。

PCではスライドさせずにスマホのみでスライドさせる

ドキュメントはここ。

なにができるか

①

②

③

これができる。

作り方

slick読み込み

CDNで読み込む方法。

headタグの一番最後に次のコード追加。

<head>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
    <link rel="stylesheet" href="css/style.css">    <!-- 自作CSS -->
</head>

bodyタグの最後に次のコードも追加

<body>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
    <script src="./js/main.js"></script>    <!-- 自作js -->
</body>

もしかしたら蛇足な行あるかも。

これでslickに必要なプラグイン・jQueryを読み込める。

コード書く

必要最低限のコード。

<div class="slider">
    <div>①</div>
    <div>②</div>
    <div>③</div>
</div>

$(window).ready(function() {
    $('.slider').slick();
});

htmlの親要素（slider）をjsで取得し、slick()とすることで実装できる。

オプション付ける

ナビゲーション用矢印、一度にスライドする枚数、表示する枚数といったオプションを設定できる。

$(window).ready(function() {
    $('.slider').slick({
        autoplay: true,     // 勝手にスライドするか
        slideToShow: 1,     // 一度に表示する枚数
        slideToScroll: 1,   // 一度にスライドする枚数
        arrows: true,       // ナビゲーション矢印の表示か非表示か
    });
});

詳しくはドキュメントのSettings参照。

勝手にタグやらクラスが作成される

slick();を用いてスライドを作成すると、勝手にタグ・クラスが作成されます。

スライド作りたての時に、表示させる要素のサイズやらを変更しようとするも、全然CSSが効いてくれない問題が発生したがこれが原因。

例えば次のようにhtmlを記述したとする。

<div class="slider wrapper">
    <div>①</div>
    <div>②</div>
    <div>③</div>
</div>

いざWeb上に表示させて開発者ツールでソースコードを見てみると次のように表示される。

<div class="slider wrapper slick-initialized slick-slider">
    <button class="slick-prev slick-arrow">
    <div class="slick-list dragabble">
        <div class="slick-track">
            <div class="slick-slide slick-cloned">③</div>
            <div class="slick-slide">①</div>
            <div class="slick-slide">②</div>
            <div class="slick-slide">③</div>
        </div>
    </div>
    <button class="slick-next slick-arrow">
    <ul class="slick-dots">
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
</div>

最初の面影がなくなるくらいメチャクチャにされます。良い迷惑です（暴論）。

こうなるのを知らない状態で「スライドの幅をwrapperの100%にしたい」と思い次のようにCSSを書いたとします。

.wrapper div {
    width: 100%;
}

残念、効きません。

wrapperと①、②などを格納しているdivタグとの間に、slickによって作成された「slick-list」「slick-track」のdivタグせいです。

①、②などを格納しているdivタグの親要素はwrapperではなくslick-trackになります。

この位置関係を理解していないと思うようにCSSを効かせることができない。

レスポンシブ

スライドさせるのはスマホのみにしたい場合。

スマホの判定方法

スマホでスライド、というよりかは「ウィンドウサイズがある値以下になったらスライド表示」が正しいです。

今回はウィンドウ幅が768px以下になったらスライド表示にさせます。

コードをかく

function checkWindowSize() {
    // ウィンドウサイズ取得
    w = $(window).width();
    if (w <= 768) {
        // スマホ向け（768px以下のとき）
        $('.slider').not('.slick-initialized').slick({
            // スライドさせる
            slideToShow: 2, 
            slideToScroll: 1, 
            arrows: true, 
            autoplay: true, 
            dots: true, 
            autoplaySpeed: 6000
        });
    } else {
        // PC向け
        $('.slider.slick-initialized').slick('unslick');
    }
}
// ウィンドウサイズが変更されるたびに起動
$(window).resize(function() {
    checkBreakPoint();
});
// 最初のチェック
checkWindowSize();

$(要素).not(CSSセレクタ): CSSセレクタを含む要素を除外できる

すなわち6行目は、「sliderというクラスを持つ要素のうち、.slick-initializedというクラスを持つものを除外したすべての要素」となります。