こんにちは！
上毛印刷WEB制作担当のソーヤです。

WEBサイトを作っていると必ず「トップページにスライダーを実装してほしい」という要望をもらいます。
それくらいコーダーとしては必須の技術になるので、ぜひ参考にしてください。
このページでは、SwiperというjQueryに依存しない、ピュアなJavaScriptで実装できるライブラリを紹介します。

ちなみに「スライダーなの？」「カルーセルなの？」「どっちなの？」という声が制作現場からよく聞こえてきますが・・・以前ベテランエンジニアの方が「カルーセルじゃないの？」とおっしゃっていたので、当サイトではカルーセルに統一したいと思います。
まあ、伝わればどっちでもいいんですけどね。

実装例

 

 

 

HTML例

まず＜head＞の中に下記を記述してください。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>

次に下記をjsファイルの手前に記述してください。

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

そうしたら、下記をカルーセル掲載位置に記述してください。

<div id="mv">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="mv-slide swiper-slide">
        <a href="javascript:void(0);" style="pointer-events: none">
          <img src="./mv01.jpg" alt="" class="">
        </a>
      </div>
      <div class="mv-slide swiper-slide">
        <a href="javascript:void(0);" style="pointer-events: none">
          <img src="./mv02.jpg" alt="" class="">
        </a>
      </div>
      <div class="mv-slide swiper-slide">
        <a href="javascript:void(0);" style="pointer-events: none">
          <img src="./mv03.jpg" alt="" class="">
        </a>
      </div>
    </div>
  </div>
  <div class="mv-pagination swiper-pagination"></div>
  <div class="mv-prev swiper-button-prev"></div>
  <div class="mv-next swiper-button-next"></div>
</div>

CSS例

#mv{
  width: 100%;
  overflow: hidden;
  position: relative;
}
.mv-slide img{
  width: 100%;
  max-width: 100%;
}

JavaScript例

new Swiper('#mv .swiper-container', {
  loop: true,
  slidesPerView: 1,
  spaceBetween: 20,
  slidesPerView: 'auto',
  centeredSlides: true,
  navigation: {
    nextEl: '.mv-next.swiper-button-next',
    prevEl: '.mv-prev.swiper-button-prev',
  },
  pagination: {
    el: '.mv-pagination.swiper-pagination',
    clickable: true,
  },
  breakpoints: {
    768: {
      slidesPerView: 1,
      spaceBetween: 20
    }
  }
})

まとめ

今回もjQueryではなく、Vanilla.jsで実装してみました。

コピペしてガンガン使ってください！