【jQuery不要】スライダープラグイン Swiper.jsの使い方

スライダーってどうやって作ればいい？

Web制作ではスライダーの実装は非常に良くある実装の1つです。

このブログではslickというプラグインを使った実装を多くご紹介していますが、もう1つ有名なスライダープラグインがあります。

それがSwiperです。

今回はSwiperを使った基本的なスライダーの実装方法を解説していきます。

効率よくコーディングしたい人はこちら

スライダープラグイン Swiperとは？

スライダーのプラグインといえばslickかSwiperの2択になると思いますが、この2つの大きな違いはjQuery依存か非依存かとなります。

そしてSwiperはjQuery非依存なので、jQueryなしでも使用可能です。

またSwiperはslickにはない様々なエフェクトが用意されています。

ただ実務で使う分には特殊なエフェクトが必要とされるケースは基本的になく、私はslickでほぼ問題なく納品出来ています（1〜2回Swiperでしか実装できないものがありましたが）

jQuery禁止案件や、ポートフォリオで凝ったスライダーを実装したい場合などはSwiperの方がいいかも知れません。

Swiper.jsの基本的な使い方

それでは早速Swiperを使ってスライダーを作っていきましょう。

手順は以下のようになります。

あとは必要に応じてCSSやJavaScriptにオプションを書いていきます。

ライブラリをCDNで読み込む

ファイルをDLするか、CDNで読み込むか2つの方法がありますが、今回はCDNで読み込む方法で解説していきます。

以下のコードをheadタグに書きます。

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

もしファイルをDLして読み込みたい場合は、こちらにアクセスしてコードをコピーして下さい。

右上にあるView Rawをクリックすればコードが全部表示されます。

swiper-bundle.min.css

swiper-bundle.min.js

HTML

次はHTMLを書いていきます。

最初は出来る限りシンプルなスライダーを作っていきます。

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="画像パス" alt="">
    </div>
    <div class="swiper-slide">
      <img src="画像パス" alt="">
    </div>
    <div class="swiper-slide">
      <img src="画像パス" alt="">
    </div>
  </div>
</div>

画像が3枚あるスライダーです。

slickと違い、class名を変えると動かないのでご注意ください。

ただ試しに一番大枠のswiperのclass名はJavaScriptも同様に変えれば動きました・・・が、上記のような騒動もあったのでなるべくclass名は公式ページに書いてある通りにしておきましょう（swiper-wrapperとswiper-slide は変えたら動かなくなりました）

CSS

これは書かなくても動きますが、とりあえず画像サイズだけ整えておきます。

.swiper-slide img {
  height: auto;
  width: 100%;
}

JavaScript

最後にJavaScriptを書きます。

これも一旦最小限のコードにします。

const swiper = new Swiper(".swiper", {});

ここまで書けたら一旦スライダーが機能するか試してみましょう。

こちらがここまでのコードで実装したスライダーです。

See the Pen
Swiper（最小限のコード） by junpei (@junpei-sugiyama)
on CodePen.

一応動いてはいるので、Swiperは正常に機能しているという確認が出来ました。

あとはもう少しカスタマイズしてみましょう。

前後の矢印、ドットインジケーター、スクロールバーを表示

先ほどのJavaScriptに矢印、ドットインジケーター、スクロールバーを表示させる為のコードを追記します。

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="画像パス" alt="">
    </div>
    <div class="swiper-slide">
      <img src="画像パス" alt="">
    </div>
    <div class="swiper-slide">
      <img src="画像パス" alt="">
    </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>

const swiper = new Swiper(".swiper", {
  loop: true,
  // ページネーション
  pagination: {
    el: ".swiper-pagination",
    clickable: true, // クリック有効化
  },
  // 前後の矢印
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  // スクロールバー
  scrollbar: {
    el: ".swiper-scrollbar",
  },
});

そしてこちらが3つを実装したスライダーです。

See the Pen
Swiper（矢印、ドットインジケーター） by junpei (@junpei-sugiyama)
on CodePen.

ただ、スクロールバーはほとんどのケースで不要かと思うので、スクロールバーは削除していいかも知れません。

こちらがスクロールバーを削除したスライダーです。

See the Pen
Swiper（矢印、ドットインジケーター、スクロールバー） by junpei (@junpei-sugiyama)
on CodePen.

以上になります。

関連記事slick関連記事
関連記事Swiper関連記事
関連記事スライダー関連記事

コーディング案件の単価と作業効率を上げる！

Brain総合ランキング1位獲得 ＆ 3日で500部突破

累計670部突破

クチコミ約370件
（平均スコア）

今だけ！5つの無料特典あり🎁

👇画像をクリック