2022/1/29 （更新日: 2022/5/14）

【2022年版】スライダープラグイン「Swiper」の使い方【オプション設定編】

Coding

Swiperのオプションってどんなのがあるの？

そんな疑問にお答えします。

前回はSwiperの導入方法と基本となる動きを確認しました。

【2022年版】スライダープラグイン「Swiper」の使い方【基礎編】

See the Pen
スライダー2 by toshi (@toshi78)
on CodePen.

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DEMO</title>
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" />
  </head>
  <body>
    <!-- Swiper START -->
    <!-- スライダー全体をくくるメインコンテナ（必須） -->
    <div class="swiper">
        <!-- 全スライドをまとめるラッパー（必須） -->
        <div class="swiper-wrapper">
            <!-- 各スライド（必須） -->
            <div class="swiper-slide">Slide A</div>
            <div class="swiper-slide">Slide B</div>
            <div class="swiper-slide">Slide C</div>
            <div class="swiper-slide">Slide D</div>
        </div>
        <!-- 前・次ボタン -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
    <!-- Swiper END -->
    <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
    <script>
        var mySwiper = new Swiper(".swiper", {
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },
        });
    </script>
  </body>
</html>

今回はいろんなオプション設定を見ていきます。

1 Swiperのオプション設定
2 まとめ：Swiperを使ってみよう！

Swiperのオプション設定

ページネーションをつける

ページネーションがあると今どのページを見ているのかがわかりやすくなります。

<!-- Swiper START -->
<!-- スライダー全体をくくるメインコンテナ（必須） -->
<div class="swiper">
    <!-- 全スライドをまとめるラッパー（必須） -->
    <div class="swiper-wrapper">
        <!-- 各スライド（必須） -->
        <div class="swiper-slide">Slide A</div>
        <div class="swiper-slide">Slide B</div>
        <div class="swiper-slide">Slide C</div>
        <div class="swiper-slide">Slide D</div>
    </div>
    <!-- 前・次ボタン -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <!-- ページネーション -->
    <div class="swiper-pagination"></div>
</div>
<!-- Swiper END -->

var mySwiper = new Swiper(".swiper", {
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    //ページネーション
    pagination: {
        el: '.swiper-pagination',
        type: 'bullets',
        clickable: true
    }
});

See the Pen
スライダー3 by toshi (@toshi78)
on CodePen.

パラメーター解説

パラメータ	タイプ	説明
el	ページネーションのセレクタ名を指定
type	‘bullets’	○ ● ● ● … 形式
	‘fraction’	何分の何形式
	‘progressbar’	プログレスバー形式
	‘custom’	カスタム形式
clickable	true	type: ‘bullets’の時のみ有効。○ ● ● ● … の●クリックで直接そのスライドに移動できる
clickable	false	●クリックで移動しない

上のサンプルはtype: ‘bullets’ですが、他の設定は下のようになります。

type: ‘fraction’

See the Pen
スライダー5 by toshi (@toshi78)
on CodePen.

type: ‘progressbar’

See the Pen
スライダー6 by toshi (@toshi78)
on CodePen.

type: ‘custom’
bulletsでもfractionでもprogressbarでもなく違った形式にする場合に使用します。

ループさせる

「loop: true」を追加すればOKです。

var mySwiper = new Swiper(".swiper", {
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    pagination: {
        el: '.swiper-pagination',
        type: 'bullets',
        clickable: true
    },
　　 //ループ
    loop: true,
});

See the Pen
スライダー4 by toshi (@toshi78)
on CodePen.

パラメーター解説

パラメータ	タイプ	説明
loop	true	ループする
loop	false	ループしない

スクロールバーをつける

<!-- Swiper START -->
<!-- スライダー全体をくくるメインコンテナ（必須） -->
<div class="swiper">
    <!-- 全スライドをまとめるラッパー（必須） -->
    <div class="swiper-wrapper">
        <!-- 各スライド（必須） -->
        <div class="swiper-slide">Slide A</div>
        <div class="swiper-slide">Slide B</div>
        <div class="swiper-slide">Slide C</div>
        <div class="swiper-slide">Slide D</div>
    </div>
    <!-- 前・次ボタン -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <!-- スクロールバー -->
    <div class="swiper-scrollbar"></div>
</div>
<!-- Swiper END -->

var mySwiper = new Swiper(".swiper", {
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    //スクロールバー
    scrollbar: {
        el: '.swiper-scrollbar',
        hide: false,
        draggable: false
    }
});

See the Pen
スライダー7 by toshi (@toshi78)
on CodePen.

パラメーター解説

パラメータ	タイプ	説明
el		スクロールバーのセレクタ名を指定
hide	true	操作時以外はスクロールバーを隠す
hide	false	常にスクロールバーが表示される
draggable	true	スクロールバーを直接操作してスライドを移動できるようにする
draggable	false	スクロールバーの直接操作不可

スライドする速度を変える

今までのサンプルよりスライドする速度を遅くしています。

var mySwiper = new Swiper(".swiper", {
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    //スピード
    speed: 4000
});

See the Pen
スライダー8 by toshi (@toshi78)
on CodePen.

パラメーター解説

パラメータ	タイプ	説明
speed	数値	スライドの切り替わる速度を数値で指定（単位：ms）

自動でスライドさせる

var mySwiper = new Swiper(".swiper", {
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    //ループ
    loop: true,
    // 自動スライド
    autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: true,
        reverseDirection: false
    }
});

See the Pen
スライダー9 by toshi (@toshi78)
on CodePen.

パラメーター解説

パラメータ	タイプ	説明
delay	数値	スライドが動く間隔。単位はms。
stopOn LastSlide	true	最後のスライドまで行ったら停止する。loop: trueの時はここの設定にかかわらず動き続ける
stopOn LastSlide	false	最後のスライドまで行くと最初のスライドに戻って再生し続ける
disableOn Interaction	true	ユーザーがスライダーを操作したら、自動再生を停止する
disableOn Interaction	false	ユーザーがスライダーを操作した後も自動再生し続ける
reverse Direction	true	最後のスライドから最初のスライドに向かって再生する
reverse Direction	false	最初のスライドから順に再生する

自動でスライドの高さに合わせる

各スライドの高さがバラバラの場合でも、高さに応じて自動で前・次ボタンやページネーションを調整します。

しかしスライダーのコンテンツの高さは違うので上下しながらスライドします。

var mySwiper = new Swiper(".swiper", { 
    navigation: { 
        nextEl: ".swiper-button-next", 
        prevEl: ".swiper-button-prev", 
    }, 
    pagination: {
        el: '.swiper-pagination', 
        type: 'bullets', 
        clickable: true 
    }, 
    loop: true, 
    // 高さ調整 
    autoHeight: true 
});

See the Pen
スライダー10 by toshi (@toshi78)
on CodePen.

パラメーター解説

パラメータ	タイプ	説明
autoHeight	true	スライドの高さに合わせてSwiperの高さを変える
autoHeight	false	スライドの高さに合わせてSwiperの高さを変更しない

一度に表示するスライド数を指定する

var mySwiper = new Swiper(".swiper", { 
    navigation: { 
        nextEl: ".swiper-button-next", 
        prevEl: ".swiper-button-prev", 
    }, 
    pagination: { 
        el: '.swiper-pagination', 
        type: 'bullets', 
        clickable: true 
    }, 
    loop: true, 
    // 一度に表示するスライド数を指定 
    slidesPerView: 2 
});

See the Pen
スライダー11 by toshi (@toshi78)
on CodePen.

パラメーター解説

パラメータ	タイプ	説明
slidesPerView	数値または’auto’	一度に表示するスライド数を指定。’auto’の時はスライドの大きさ次第。
slidesPerView	数値	slidesPerView: ‘auto’かつ loop: trueの場合は必須。総スライド数の半分以上の値を指定。

スライドの間隔を設定する

var mySwiper = new Swiper(".swiper", { 
    navigation: { 
        nextEl: ".swiper-button-next", 
        prevEl: ".swiper-button-prev", 
    }, 
    pagination: { 
        el: '.swiper-pagination', 
        type: 'bullets', 
        clickable: true 
    }, 
    loop: true, 
    slidesPerView: 3, 
    // スライドの間隔 
    spaceBetween: 10 
});

See the Pen
スライダー11 by toshi (@toshi78)
on CodePen.

パラメーター解説

パラメータ	タイプ	説明
spaceBetween	数値	スライドの間隔を指定（単位：px）

レスポンシブ設定の方法

最後にレスポンシブ設定の記述方法を見ておきましょう。

先にコードを示すと以下のとおりとなります。

var mySwiper = new Swiper(".swiper", {
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    pagination: {
        el: '.swiper-pagination',
        type: 'bullets',
        clickable: true
    },
    loop: true,
    //デフォルト（画面幅が最も狭い）のスライドの数などを設定
    //表示させるスライドの数を１に設定
    slidesPerView: 1,
    breakpoints: {
        768: {
            //表示させるスライドの数を２に設定
            slidesPerView: 2,
            //スライド間の間隔を20pxに設定
            spaceBetween: 20
        },
        980: {
            //表示させるスライドの数を３に設定
            slidesPerView: 3,
            //スライド間の間隔を30pxに設定
            spaceBetween: 30
        },
    }
});

💡ポイント！　ブレイクポイントを指定する