https://kenwheeler.github.io/slick

のようなカルーセルスライダーを利用した場合にはslickを使うとかんたんにできるらしいのでやってみた

ダウンロード

https://kenwheeler.github.io/slick/#go-get-itからダウンロードするかCDNを使ってHTMLにscriptとcssを指定するだけ

info別途jQueryが必要

index.html

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="./slick.css"/>
    <link rel="stylesheet" type="text/css" href="./slick-theme.css"/>
  </head>
  <body>
    <!-- 表示する要素の幅 * 表示する要素数の幅・高さが必要 -->
    <div class="slider slick-item" style="width:950px;height:300px;margin: 30px">
        <div>
            <img data-lazy="1.png" width="300" height="300" />
        </div>
        <div>
            <img data-lazy="2.png" width="300" height="300" />
        </div>
        <div>
            <img data-lazy="3.png" width="300" height="300" />
        </div>
        <div>
            <img data-lazy="4.png" width="300" height="300" />
        </div>
        <div>
            <img data-lazy="5.png" width="300" height="300" />
        </div>
    </div>
    <script src="./jquery.min.js"></script>
    <script type="text/javascript" src="./slick.js"></script>
    <script>
$(".slick-item").slick({
  dots: true,
  allows: true,
  infinite: true,
  autoplay: true,
  autoplaySpeed: 2000,
  slidesToShow: 3, // スライドに表示する要素数
  slidesToScroll: 1 // スライドする際の要素数
});
    </script>
  </body>
</html>

今回はslick-theme.cssを使ってるので動画では背景白で透過されて表示されてないがスライドを移動させたりするコントロールボタンなども表示される。自分でCSS書いて調整するのがいいのかもしれない

また、他にもオプションとかが色々あるのでそこらへんは公式サイトを見た方が早いかと