MASANAO MAEDA
PORTFOLIO

画像のスライダーの実装方法は色んなやり方がありますが、模写サイトで「スワイパー」を使用していたこともあり、「スワイパー」に関して色々と調べてみました。すると画像スライダーで「スワイパー」をおすすめしているサイトが多数ありましたので、私も「スワイパー」を使って画像スライダーを実装してみました。

swiper.jsのCDNを読み込む

まずhead内に下記のコードを記述します。

<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css"/>
        

次にbody直下に下記のコードを記述します。

<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
        

HTMLの基本的な記述

HTMLの基本的なレイアウトは下記の通りです。各クラス名は固定になります。

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
<!-- ページネーション -->
  <div class="swiper-pagination"></div>
<!-- ナビゲーションボタン -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

</div>
        

JavaScriptの基本的な記述

最後にJavaScriptの記述は下記の通りです。

　　　let swiper = new Swiper(".swiper", {
  navigation: {
    nextEl: ".swiper-button-next",　　 　//ナビゲーション
    prevEl: ".swiper-button-prev",
}
  pagination: '.swiper-pagination',  //ページネーション
  loop: true,  //ループで表示させる
  speed: 1000,  //スライドのスピード
});
        

これでスライダーが実装できます。更にスワイパーにはオプションも多数ありますので、細かくカスタマイズすることも可能です。ブレイクポイントの設定もできるので、メディアクエリなしでレスポンシブ対応もできるので、本当に使いやすかったです。

感想・まとめ

簡単な解説になってしまいましたが、シンプルなスライダーならこれだけで十分でした。まだまだ完璧に使いこなせているわけではないのでもっと深く掘り下げていきたいと思います。ゆくゆくはこういう機能は使わずに自分で一からプログラムできるようになりたいと思います。

参考サイト