簡単にスライダーを実装できる Swiper.js の使い方

はじめに

Web サイトでスライダーを実装するとき、いろんなライブラリがある中で、どれを使用すればいいのか迷ってしまいます。
今回紹介する Swiper は、jQuery 等のライブラリを使用せず、簡単にスライダーが実装できるため、初心者にもおすすめです。

目次

Swiper とは

Swiper は jQuery のようなライブラリを必要としない、javascript のスライダーで、スマホやタブレットなどのモバイル端末のタッチ操作に対応した高機能なスライダーです。
ライセンスは MIT ライセンスです。

Swiper

Swiper の使い方

最初に Swiper のライブラリを読み込みます。
CDN を使って読み込む方法と、js ファイルをダウンロードしてきて読み込む方法がありますが、ここでは CDN を利用して読み込みます。

CDN を使用して読み込む方法

スライダーを追加するページの head に下記の2行を追加します。

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

スライダーの作成

次に、実際に画像のスライダーを作っていきます。
スライダーを追加するページ内に下記のコードを追加します。

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="img/image01.jpg" alt="画像1"></div>
        <div class="swiper-slide"><img src="img/image01.jpg" alt="画像2"></div>
        <div class="swiper-slide"><img src="img/image01.jpg" alt="画像3"></div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

最後に、先ほど読み込んだ script の下に、下記のコードを追加します。

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js">
<script>
var swiper = new Swiper('.swiper-container', {
    loop: true,
    speed: 1000,
    autoplay: {
        delay: 4000,
        disableOnInteraction: false,
    },
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    }
});
</script>

これを実行すると、以下のような動きになります。
(画像の部分は css に置き換えてあります。)

See the Pen Swiper.js by goodlife.tech (@goodlife-tech) on CodePen.

Swiper のオプション

Swiper には豊富なオプションがあり、動きを変更したい場合はオプションを変更することで対応することが出来ます。
詳しくは https://swiperjs.com/api/ を参照してください。

ここでは、先ほどのスライダーのオプションを説明します。

パラメータデフォルト説明
loopfalseループを有効にする場合は true を指定します。
speed300スライドが切り替わる間の時間。単位はミリ秒。
autoplay-自動再生を有効にする場合はパラメータを指定します。
pagination-ページネーションのパラメータを指定します。
navigation-ナビゲーションのパラメータを指定します。

autoplay のパラメータ

autoplay に設定するパラメータの一部です。

パラメータデフォルト説明
delay3000スライドが切り替わるまでの停止時間。単位はミリ秒。
disableOnInteractiontrue操作後も自動再生が再開されます。

pagination のパラメータ

pagination に設定するパラメータの一部です。

パラメータデフォルト説明
elnullページネーションのセレクタ。
clickabletruetrue の場合、ボタンをクッリクするとスライドが遷移します。

navigation のパラメータ

navigation に設定するパラメータの一部です。

パラメータデフォルト説明
nextElnull次へボタンのセレクタ。
prevElnull前へボタンのセレクタ。

さいごに

今回は単純なスライダーの実装方法を説明してみました。Swiper にはここで紹介した以上の機能がたくさんあります。ぜひ、自分で試行錯誤して好みにあったスライダーを作ってみてください。