必要なファイル

Swiper

• Swiper[JS]
• Swiper[CSS]
• 自前のJSファイル

Swiperの概要

Swiperはスライドショーを実装するためのプラグインであり、豊富なオプションを提供しています。この記事では、Swiperの基本的な使い方と応用について紹介します。

Swiperの実装方法

Swiperを使ったスライドショーの実装方法は以下の通りです。

スタイルシートの読み込み

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

HTMLの配置

<div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="画像パス"></div>  
      <div class="swiper-slide"><img src="画像パス"></div>  
      <div class="swiper-slide"><img src="画像パス"></div>  
    </div>
    <div class="swiper-button-next"></div>  
    <div class="swiper-button-prev"></div>  
    <div class="swiper-pagination"></div>  
  </div>

上記のコードは、Swiperの基本的な配置例です。クラス名（swiper-wrapper, swiper-slide）は変更できませんが、div要素をulなどに変更することは可能です。

また、その他のクラス名（swiper, swiper-button-next, swiper-button-prev, swiper-pagination）はオプションで変更することができますので、同じページ内で表示方法を変えたい場合は適宜変更してください。

スクリプトの読み込み

<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>  
<script src="自前のファイル.js"></script>

JavaScriptの設定

自前のJavaScriptファイルに以下のコードを追加することで、Swiperを初期化します。

let mySwiper = new Swiper(".swiper", {
  loop: true,  // ループさせるか (true/false) 初期値: true
  speed: 300,  // スライドの移動時間 (number) 初期値: 300 (単位/ms)
  pagination: {
    el: ".swiper-pagination",  // ページネーションのクラス名
    type: "bullets",  // ページネーションの種類 (初期値: bullets, fraction, progressbar, custom, swiper-scrollbar)
    clickable: true  // クリックで移動するか (true/false) 初期値: true
  },
  autoplay: {
    delay: 2000,  // 次のスライド移動までの時間 初期値: 3000 (単位/ms)
    stopOnLastSlide: false,  // 最後のスライドで止めるか (true/false) 初期値: false
    disableOnInteraction: true  // 操作中にスライドを止めるか (true/false) 初期値: true
  },
  navigation: {
    nextEl: ".swiper-button-next",  // 次ページボタンのクラス名を指定
    prevEl: ".swiper-button-prev"  // 前ページボタンのクラス名を指定
  }
});

オプション一覧

Swiperではさまざまなオプションを使用することで、スライドショーの挙動や外観をカスタマイズすることができます。以下に一部の主なオプションを紹介します。

これらのオプションを使用することで、Swiperをより自由にカスタマイズすることができます。詳細なオプションの説明や他のオプションについては、公式ドキュメントを参照してください。

動かない時のチェック項目

まとめ

Swiperはバージョンによって記述方法が異なることに注意してください。本記事ではSwiperバージョン7を使用していますので、記事中のCDNリンクをご利用ください。

また、Swiperのバージョンアップに伴い、記述方法が変更される場合があります。本番環境では安定した動作を保証するために、ダウンロードファイルを利用することをおすすめします。

以上が、Swiperの基本的な使い方と実装手順です。オプションの詳細や応用的な使い方については、公式ドキュメントやデモサイトを参考にしてください。Swiperを活用して、魅力的なスライドショーを実装してみてください。