Web制作 スライダー

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

【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を使ってスライダーを作っていきましょう。

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

  1. 必要なファイルをDLして読み込む or ライブラリをCDNで読み込む
  2. HTMLでスライダーを動かすのに必要なclassを付けながらコードを書く
  3. JavaScriptを書く

あとは必要に応じて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

 

注意ポイント

この記事では2022年4月3日現在の最新Ver8.07を使用しています。

上記URLからアクセスした際は最新版を選択するようにしましょう。

 

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名を変えると動かないのでご注意ください。

 

注意ポイント

今回はVer8.07を使用していますが、Ver6からVer7に変わった際にこの動作に関わるclass名が"swiper-container"から"swiper"に変わり、スライダーが急に動かなくなったとTwitter上でも軽い騒ぎになりました。なのでVerには最新の注意を払うか、CDNではなくファイルをDLして読み込むようにしましょう。

 

ただ試しに一番大枠のswiperのclass名はJavaScriptも同様に変えれば動きました・・・が、上記のような騒動もあったのでなるべくclass名は公式ページに書いてある通りにしておきましょうswiper-wrapperswiper-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.

以上になります。

 

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

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

クチコミ約280件(平均スコア

今だけ!5大特典あり🎁

-Web制作, スライダー
-