Swiperというライブラリで簡単にスライダーを実装する

www.willstyle.co.jp

Swiperのバージョンとかによって微妙に書き方が異なる印象があるので注意。

<!-- swiper -->
<link rel="stylesheet" href="<%= pathToAssets %>lib/swiper/css/swiper.min.css">
<script src="<%= pathToAssets %>lib/swiper/js/swiper.min.js"></script>

これで読み込む。

    <!-- Swiper-->
    <div class="m-figureCaption__swiperContainer swiper-container">
      <div class="swiper-wrapper">
        <!-- スライドの中身 -->
        <div class="swiper-slide">
          <img src="imgs/img-active-01-01.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="imgs/img-active-01-02.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="imgs/img-active-01-03.jpg" alt="">
        </div>
      </div>
      <!-- ページネーション -->
      <div class="m-figureCaption__pagination swiper-pagination"></div>
    </div>

この構造は崩さず。ページネーション等追加したのはこのように定義。

もともと画像を置いていたimgタグをこれに書き換えるイメージです。画像の枠とかは作ってあげておいてね。

で、JSで定義

       var mySwiper = new Swiper(".swiper-container", {
        // スライドの仕方
        effect: "fade",
        // 最後まで行ったら最初に
        loop: true,
        // 画像がスライドする際にかかる時間
        speed: 500,
        autoplay: {
          delay: 4000, // 画像が何秒ごとに自動スライドするか
          disableOnInteraction: false //ユーザーに操作されても自動再生停止しない
        },
        // ページネーション
        pagination: {
          el: ".swiper-pagination", //ページネーションのクラス
          type: "bullets", //ページネーションの見た目のタイプ
          clickable: true //ページネーションをクリックでスライド移動
        }
      });