「Swiper」の使い方とオプショを使ってカスタマイズする方法

「Swiper」の使い方とオプションを使ってカスタマイズする方法

 更新日:

LINEで送る
Pocket

「Swiper」の使い方とオプショを使ってカスタマイズする方法

Webサイトに使われることが多い「スライダー機能」ですが、主にjQueryを使用したスライダーが多く使われてきましたが、
今回はjQuery不要のスライダー「Swiper」の使い方とオプションによるカスタマイズ方法をご紹介していきます。

この記事の目次

  1. Swiperの使い方
  2. レイアウトを追加する
  3. サイズを設定する
  4. 初期化する
  5. パラメータを使用したカスタマイズ
    主なパラメータ一覧
  6. コンポーネント
    Navigation
    Pagenation
    Scrollbar
    Autoplay
  7. 応用編

1.Swiperの使い方

※2019/10/3 追記:最新版であるバージョン5の使い方を追記しました。

HTML(CDN:バージョン5)

バージョン5では、基本的な使い方は変わりませんが、CDNの読み込み先が変わっています。また、ダウンロードはこちらから可能です。これから使用する場合は、最新版を使用することをおすすめします。

<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">

<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

HTML(CDN:バージョン4)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>

※「/4.5.0」の部分はこの記事執筆時の最新バージョンとなります。適宜変更をしてください。

2.レイアウトを追加する

続いて、基本となるレイアウトを<body>~</body>に追加していきます。

HTML

<!-- Slider全体のコンテナ -->
<div class="swiper-container">
    <!-- Sliderの内包コンテナ -->
    <div class="swiper-wrapper">
        <!-- Slideさせたいコンテンツ -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</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>

スライド全体を「swiper-container」クラスで囲み、スライドさせたいコンテンツを「swiper-slide」クラスで囲みます。さらに、それらのコンテンツの親要素として「swiper-wrapper」クラスで囲みます。

そして、「swiper-pagination」クラスで「ページネーション」を、「swiper-button-(prev or next)」でナビゲーションボタンを、「swiper-scrollbar」クラスでスクロールバーが表示されます。

3.サイズを設定する

CSSでサイズを設定していきます。「.swiper-container」クラスに設定しますが、スライドの内容によっては、「height」を設定しないと表示がされない場合があるので注意が必要です。

CSS

.swiper-container {
    width: 600px;
    height: 300px;
}

4.初期化する

最後に初期化をします。下記のJSを</body>の直前に読み込みます。

HTML(パラメータなし)

<script>
 var mySwiper = new Swiper ('.swiper-container', {
 })
</script>

これでもスライドはしますが、ナビゲーションやスクロールバーが機能しないので、パラメータを設定して、動くようにします。

HTML(パラメータあり)

<script>
  var mySwiper = new Swiper ('.swiper-container', {
    // ここからオプション
    loop: true,
    pagination: {
      el: '.swiper-pagination',
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })
 </script>

これで、基本的なスライダーが動作するようになります。ちなみに、この時点で動作しないという方は、「記述ミス」もしくは「Swiperのバージョン」をご確認ください。
次に、主なパラメータを使ったカスタマイズを見ていきましょう。

5.パラメータを使用したカスタマイズ

Swiperには多くのパラメータが用意されています。したがって、すべてのパラメータをここでご紹介するのは難しいので、使用頻度が高いパラメータに絞ってご紹介したいと思います。すべてのパラメータを確認したい場合は下記リンクからご確認ください。

Swiper API

5-1.主なパラメータ一覧

パラメータ デフォルト値 説明
direction string horizontal スライド方向を「horizontal(横)」または「vertical(縦)」にします。
speed number 300 スライドとスライドの遷移時間(ミリ秒)を設定します。
effect string ‘slide’ スライドのエフェクトを設定します。’slide’,’fade’,’coverflow’(Apple製品によく見られる3DGUIのようなアニメーション),’flip’(回転しながらスライド)が選択できます。
spaceBetween number 0 スライドとスライドの余白(px指定)を設定します。
slidesPerView number もしくは ‘auto’ 1 一度に表示するスライドの数。※「auto」の場合、loopするには、loopedSlidesを設定する必要がある。
loop boolean false スライドをループさせます。初期値はfalse。
breakpoints object なし 画面サイズごとに異なるパラメータを設定できます。但し、slidesPerView、slidesPerGroup、spaceBetweenのような異なるレイアウトとロジックを必要としないパラメータだけを変更できます。

var swiper = new Swiper('.swiper-container', {
  breakpoints: {
    // ウィンドウサイズが320px以下
    320: {
      slidesPerView: 1,
      spaceBetween: 10
    },
    // ウィンドウサイズが480px以下
    480: {
      slidesPerView: 2,
      spaceBetween: 20
    },
    // ウィンドウサイズが640px以下
    640: {
      slidesPerView: 3,
      spaceBetween: 30
    }
  }
})

6.コンポーネント

コンポーネントを利用するとナビゲーションやページネーションを設定することができます。コンポーネントとは、「部品」といった意味で、Swiper側で予め便利な機能を利用できるように用意されています。主なコンポーネントを見ていきましょう。

Navigation(ナビゲーション)

スライドにナビゲーション(前後のスライドへのボタン)を表示します。

使用例

var mySwiper = new Swiper('.swiper-container', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

パラメーター

パラメータ デフォルト値 説明
nextEl string null 「次へ」ボタンのように動作する要素のCSSセレクタまたはHTML要素を含む文字列
prevEl string null 「次へ」ボタンのように動作する要素のCSSセレクタまたはHTML要素を含む文字列
hideOnClick boolean false スライダーのコンテナをクリックした後にナビゲーションボタンの表示/非表示を切り替える。
disabledClass string ‘swiper-button-disabled’ 前or後のスライドがないときにナビゲーションボタンに追加されるCSSクラス名
hiddenClass string ‘swiper-button-hidden’ 非表示になったときにナビゲーションボタンに追加されるCSSクラス名

Pagenation

スライドにページネーション(何枚目のスライドかを示す)を表示します。

使用例

var mySwiper = new Swiper('.swiper-container', {
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
  },
});

Scrollbar

スライドにスワイプやドラッグの際に、スクロールバーを表示します。

使用例

var mySwiper = new Swiper('.swiper-container', {
  scrollbar: {
    el: '.swiper-scrollbar',
    draggable: true,
  },
});

Autoplay

自動でスライドを再生します。「delay」パラメータでスライド間の遷移の遅延を設定します。
「delay」パラメータを記述しないと自動再生は無効になるので注意が必要です。ちなみに、「1000=1秒」となります。

使用例

var mySwiper = new Swiper('.swiper-container', {
  autoplay: {
    delay: 5000,
  },
});

※スライド個別に「delay」を設定したい場合

スライドごとに「delay」の値を変えることができます。以下の様に、「data-swiper-autoplay=”2000″」と属性を設定することで可能です。

<div class="swiper-slide" data-swiper-autoplay="2000">

7.応用編

「Swiper」にはここでは紹介していない機能がもっと多く存在します。これらの機能を活用することで、様々な動きや機能を実装することが可能となります。
実際に、下記のような機能を実装してみましたので参考にしてみてください。

スワイプでタブ切り替えができるアプリ風メニューを実装する方法

LINEで送る
Pocket