コピペで簡単！高機能スライダー[Swiper.js v6]の使い方｜Javascript

2021年03月14日
この記事は約5分で読めます。

自力でスライダーを設置するのは簡単だが、スライダーの「当たり前」機能を付けるのがすごい手間だったりする。
「レスポンシブ対応」や「スワイプやマウスオーバーでの操作」、「スライドの数が増えた時のスクリプト、スタイルの修正」、「Next,Prevボタンの挙動」、「スライド数と現在のスライド位置を表示する●の設置」などなど、スライダーを作るだけでひとつのサイトを作るくらいの手間がかかる。
そんな手間と時間を一気に解消してくれるのがSwiper.js。

はじめに

Swiper.jsは、モダンブラウザ向けに作られた高機能で軽量なプラグイン。（IEは非対応）
Swiper.jsのページは下のリンクから確認できます。
swiperjs.com/
Swiper GitHub
Swiper ダウンロード
Swiper デモ

Swiper.jsをダウンロードして利用

デモページを見ると色んなスライダーの設置が可能で魅力的だけど、ここでは一般的によく使うスライダーの実装について解説していきます。
まずSwiper.jsをダウンロードするかCDNで利用します。
CDNの場合、何年か経つと更新され利用できなくなることがあるのでダウンロードして利用するのが確実だと思います！
下のダウンロードボタンからCSSとJSファイルをダウンロードしてね。

CSSファイルをダウンロード
JSファイルをダウンロード

CSSフォルダとJSフォルダを作ってダウンロードしたファイルをその中に入れます。
ファイルを各フォルダにいれたらHTMLの「<head></head>」内にSwiperを追加しましょう。
こちら ↓ をコピペしてね。 

<link rel="stylesheet" href="css/swiper-bundle.css" />
<script src="js/swiper-bundle.js"></script>

Swiper.jsをCDNから利用

CDNを利用する場合は下のソースをコピーして利用してください。
HTMLの「<head></head>」内にSwiperを追加しましょう。 

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

HTMLの書き方

「<head></head>」内にSwiperのCSSとJSを追加したら
次に下のHTMLを「<body></body>」内にコピーして利用します。 

<div class="swiper-container">
  <!-- スライドメニュー -->
  <div class="swiper-wrapper">
    <!-- スライドメニュー内容を個々に追加してください -->
    <div class="swiper-slide">スライド１</div>
    <div class="swiper-slide">スライド２</div>
    <div class="swiper-slide">スライド３</div>
    <div class="swiper-slide">スライド４</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>

最後にJSでスワイパーを初期化

最後にJSファイルにスワイパーの初期化コードをコピペして終わりです。
このJSでスワイパーの表示を色々指定できるので
個性的なスライダーを作る場合は「Swiper.jsの機能一覧と使い方」から色々試してみてください！
一般的なスライダーならこのまま利用してください。 

  const swiper = new Swiper('.swiper-container', {
    // スライドメニューの表示方法
    direction: 'horizontal',
    loop: true,
    autoHeight: true,
    autoplay: {
      delay: 1000,
    },
    // スライドのページネーション表示
    pagination: {
      el: '.swiper-pagination',
    },
    // 「次へ」や「戻る」のアイコン表示
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    // スクロールバーの表示
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  });

デモで動きを確認

「.swiper-slide」内に画像やリンクを追加してそれっぽいスライダーが出来ました！
分かりやすいようにスライドのスピードを早くしている(delay: 1000の部分)ので、
必要な機能や不要な機能が有ったら追加で修正してくださいね。
英語でちょっと分かりにくいけど下のページで機能の追加や表示の変化を指定できますので参考にしてください。

Swiper.jsの機能一覧と使い方

コメント

タイトルとURLをコピーしました