[slick.js]よく使うオプションのメモ

コピペで済ませよう。

<head>
<body>
レスポンシブ

<head>

    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script>
        $(function(){
            $('#Slider').slick({
                arrows: false,
                fade: true,
                speed: 1000,
                autoplaySpeed: 10000,
                autoplay: true,
                swipe: false,
                pauseOnHover: false,
            });
        })
    </script>

ページャーとかそういうの全部撤廃して、ユーザーによる操作も廃して、フェードで切り替え。

<body>

<div class="slider" id="Slider">
    <div class="slide"><picture><source srcset="img/topimg/1-sp.jpg" media="(max-width:767.98px)"><img src="img/topimg/1-pc.jpg" alt=""></picture></div>
    <div class="slide"><picture><source srcset="img/topimg/2-sp.jpg" media="(max-width:767.98px)"><img src="img/topimg/2-pc.jpg" alt=""></picture></div>
    <div class="slide"><picture><source srcset="img/topimg/3-sp.jpg" media="(max-width:767.98px)"><img src="img/topimg/3-pc.jpg" alt=""></picture></div>
    <div class="slide"><picture><source srcset="img/topimg/4-sp.jpg" media="(max-width:767.98px)"><img src="img/topimg/4-pc.jpg" alt=""></picture></div>
    <div class="slide"><picture><source srcset="img/topimg/5-sp.jpg" media="(max-width:767.98px)"><img src="img/topimg/5-pc.jpg" alt=""></picture></div>
</div>

PCとスマホで画像切り替え。

レスポンシブ

    $(function(){
        $('#slider').slick({
            arrows: true,
            dots: true,
            autoplay: false,
            speed: 1000,
            slidesToShow: 1,
            slidesToScroll: 1,
            responsive: [{
                breakpoint: 1023.98,
                settings: {
                    slidesToShow: 3,
                }
            }, {
                breakpoint: 767.98,
                settings: "unslick" // slickを削除
            }]
        });
    });

一定数で内容変更したり無効化したりする。

あんまり凝った切り替えをすると妙な動作になったりする。

responsiveが上手く動かない場合、それぞれの処理をmatchMedia()で割り振る手もある。

スライド動作中とか表示枚数変更とかを仕込んでのレスポンシブは、変更後に正しい位置に戻ろうとしたりして、だから逆回転が起きたり動作がしばらくおかしかったりがあるので、なんだったらリフレッシュしちゃうことを考えたほうがいい場合もある。

汎用性の高さと一般的な使用においての安定性はいい感じなんだけど、やりすぎるとちょっとね、みたいな感じ。