スライダーを実装できるおすすめプラグイン Swiper JSの使い方

By /

ホームページを作る時に必ずと言っていいほど出てくるのがスライダー。
今回は制作でよく使う、というか最近これしか使ってないSwiper JSの使い方を紹介します。

色々な案件で使いましたが、多くのカスタマイズにも耐えれるのでとても良いプラグインかと思います。

もちろん、Swiper JSが全てにおいて万能ではなく苦手な部分もあります。そういった部分はカスタマイズして機能を増やしたり、他プラグインを検討してみてください。

Swiperの必要なファイル

JSとCSSファイルを読み込む必要があり、SwiperのGithubよりダウンロードできます。
以下のようなCDNでも問題ありません、お好きな方を使ってください。CDNは圧縮版と非圧縮版があるのでそちらもお好きな方をお使いください。

過去に起こったことで、自動で最新のものが適用されるCDN版を使っていた際に、Swiperのアップデートがあり、表示が崩れるということがありました。
意図しない表示崩れを防ぐために、Swiperをダウンロードしサーバーにアップして使った方が良い面もあります。

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

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

SwiperのHTML/CSSの記述

ファイルの読み込みができたら、HTML/CSSを記述していきます。
とは言っても、CSSの記述デザインによって大きく異なりますので今回はHTMLを紹介します。
公式にアナウンスされているHTMLなので、このまま使うとデフォルトのCSSが反映されます。( ひとまずこのまま使った方が良い )

<!-- Swiperスライダー全体を囲むdiv -->
<div class="swiper-container">
  <!-- スライドするコンテンツを囲むdiv -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <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 class="swiper-scrollbar"></div>
</div>

どんな表示でもこの表示から大きく変わることはあまりないのかなと思います。
結構トリッキーな動き等も実装しましたが、問題ありませんでした。

JavaScriptの記述

あとはオプションをつけていくだけ。「swiper-container」をJSで指定します。

今回はよく使うベーシックなパラメータを書いています。

const swiper = new Swiper('.swiper-container', {
  // よく使うものを記載しています。
  spaceBetween: '40', // スライド間のマージン
  slidesPerView: '3', // スライドの表示数、swiper-container内に表示する数
  loop: true, // ループ
  centeredSlides: true, // アクティブなスライドを画面の中央に配置するか
  // ページネーション
  pagination: {
    el: '.swiper-pagination',
  },
  // 左右の前後のスライドへの矢印
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  // スクロールバー
  scrollbar: {
    el: '.swiper-scrollbar',
  },
  breakpoints: {
    // ウィンドウサイズが 320px 以上の時、数値を変えてレスポンシブ対応が可能
    320: {
      slidesPerView: 2,
      spaceBetween: 20
    },
  }
});

細かいオプションについては公式サイトのAPIを参考にしてください。

今後のSwiperに関するブログ記事

今後Swiperのカスタマイズの仕方を書いていきます。
実際に制作で作ったパターンの紹介や、callback等を使った込み入ったカスタマイズを紹介できればいいなと思っています。

他にもホームページ制作に必要なJSプラグインを紹介していく予定です、それでは。

上部へスクロール