本文へジャンプ

脱jQuery!?、Swiper使ってみた。

Posted by kenta sugiyama

どうも、フロントエンドエンジニアのスギヤマです。

Barba.jsanime.jsと紹介してきましたが、 今回はその2つよりも長らく使用している Swiper について紹介したいと思います。

slick、Bxslider、FlexSliderなどカルーセルのjQueryプラグインで有名なものは数多くありますが、jQueryなしで動くものは少ないかなと思います。

slick.min.js : 44 KB程度
jquery.bxslider.min.js : 24 KB程度
jquery.flexslider-min.js: 23 KB程度

swiper.min.js : 96 KB程度

Swiper はモダンブラウザのみがサポートで、他のjQueryプラグインの3つと比べると96 KBと容量があります。
しかし、jQueryを別で読み込む必要がないので他のプラグインよりも結果的には軽く済みます。
モダンブラウザのみがサポートなので過去しばらくはSPのみの場合などに使っていましたが、スマホファーストとなってきてPC対応も概ねIE11〜となってきた昨今では Swiper のみで十分かなと思います。

Swiperの特徴

Swiper の特徴としてオプション等の機能が豊富なことが挙げられます。
公式のデモページにもありますが立体的なスライドアニメーションや、カルーセル内にカルーセルを仕込むネスト化が簡単に実装できます。

使ったことはないですが。。笑

使い方

HTML(コード読み込み)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.min.js">

※現行最新は4.6.6です。(2019.02.04)

HTML(DOM記述)

<div class="swiper-container">
    <ul class="swiper-wrapper">
        <li class="swiper-slide">Slide 1</li>
        <li class="swiper-slide">Slide 2</li>
        <li class="swiper-slide">Slide 3</li>
    </ul>
    <div class="swiper-pagination"></div> 
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

大外の swiper-container はJavascriptからの指定に必要なだけなので決まりはないですが、内側の swiper-wrapperswiper-slide については決まったclassを使う必要があります。その他ページネーションなどのボタン類は下にあるようにオプションとして指定するので自由な命名で問題ありません。

Javascript

const swiper = new Swiper ('.swiper-container', {
  // オプションを記述
  pagination: '.swiper-pagination',
  nextButton: '.swiper-button-prev',
  prevButton: '.swiper-button-prev'
  // オプションを記述
})

簡単ではありますが前後ボタン、ページネーションありの最小構成はこんな感じになるかと思います。 ボタン類は別途追加したりCSSの調整が必要になります。

豊富なオプション

オプションが豊富と書きましたが、個人的によく(?)使うオプションはこんな感じです。

loop :(boolean)trueだとループするようになる。
effect :(string)"slide", "fade", "cube", "coverflow" もしくは "flip"。スライドの仕方を選択できる。デフォルトではslide。
initialSlide :(number)一番最初に表示させるスライドの番号(0スタート)。デフォルトでは0。
paginationClickable :(boolean)trueにするとpaginationクリック時にスライドする。デフォルトではfalse。
autoplay :(number)何ミリ秒ごとに遷移するかを設定できる。このパラメータが設定されていない場合自動再生されない。.swiper-slideにdata-swiper-autoplayを追加すると個別に設定することができる。
speed :(number)trueだとループするようになる。
autoplayStopOnLast :(boolean)trueにすると、最後のスライドになった時に自動再生が停止する。loopを設定している場合は効かない。デフォルトではfalse。
onReachEnd :(function)最後のスライドに来た時に実行される関数。
breakpoints :(object)画面サイズごとでパラメータを設定したい場合に使用。breakpoints内で設定できるものとできないものがある。

breakpoints: {
  // 320px以下になったら
  320: {
    spaceBetween: 10
  },
  // 320px以下になったら
  640: {
    spaceBetween: 20
  }
}

spaceBetween :(number)スライドの間の距離を設定できる。デフォルトでは0。

また、オプションではないですが例えば

const hoge = new Swiper ('#hoge');
const piyo = new Swiper ('#piyo');
})

のような2つのスライダーを設定した場合に

hoge.params.control = piyo;
piyo.params.control = hoge;

とすると、2つのスライダーを相互に連携させることができます。

まとめ

上に挙げたオプションはごく一部でSwiperにはもっと多くのオプションがあります。

過去にはスクラッチで作成したカルーセルを使用していたこともありますが、機能追加だったりで工数が嵩んだりした背景からプラグインを使用するようになりました。
プラグインの場合必要以上の機能が備わっていたりするので、機能要件などにもよりますが使う使わないの選択も必要なのかなと思います。

微妙に痒いところに手が届かなかったりしますし。。

Recent Entries
MD EVENT REPORT
What's Hot?