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

コピペで済ませよう。

<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とスマホで画像切り替え。

コメント

タイトルとURLをコピーしました