Swiper.jsのカスタマイズ紹介

JavaScript

Isamu Mizuno: Senior Engineer

Swiper.jsとは
読み込み
ベースとなるHTML、JS
1.スライドの切り替わりをフェードにする
2.スライドの切り替わりとページネーションを連動させる
3.スライドの切り替わりとページネーションと自作した要素を連動させる
4.無限ループスライダー
5.スクロールバーを付ける
まとめ
参考サイト

こんにちはミズノです。
スライダーのライブラリではおなじみのSwiper.jsですが
今回は使い方とカスタマイズを紹介していきたいと思います。(本記事執筆使用バージョン4.5.1)

Swiper.jsとは

jQuery依存していない
豊富なオプション、コールバック関数がありカスタマイズ性に優れている
レスポンシブ対応

などなど…詳しくは公式ドキュメントをご参照ください。

読み込み

Swiper.jsの読み込みはバージョン5.0からIEサポート対象外のためIE対応が必要な場合は4系を使用する必要があります。今回のDEMOは4系の中で一番新しい4.5.1をCDNで読み込んでいます。

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

CDN以外の読み込みは公式サイトを参照ください。

ベースとなるHTML、JS

今回のDEMOのベースとなる構造は下記の通りです。
ここから記述を追加してカスタマイズしていきます。

HTML

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="img/carrot.jpg" alt=""></div>
        <div class="swiper-slide"><img src="img/eggplant.jpg" alt=""></div>
        <div class="swiper-slide"><img src="img/broccoli.jpg" alt=""></div>
    </div>
</div>

JS

var mySwiper = new Swiper('.swiper-container', {
 // ここにオプションを追記していく
})

1.スライドの切り替わりをフェードにする

See the Pen swiper demo1 by mizuno (@mizuno_evo) on CodePen.

effect: "fade"にしたときにcrossFade: trueも追記してあげると切り替わりが綺麗になります。

2.スライドの切り替わりとページネーションを連動させる

See the Pen dypBmyz by mizuno (@mizuno_evo) on CodePen.

アクティブなページネーションにswiper-pagination-bullet-activeが付与されるので、付与された要素にanimation: sliderPagination 3s linear forwardsをあてています。
slideChangeの処理ですが1枚目のスライドはdelay:3000なので切り替わりまで3秒ですが2枚目からはdelay:3000 + speed:300なので3.3秒掛かることになりページネーションと0.3秒ずれてしまいます。なのでslideChangeで2枚目からdelay:2700に変更して3秒になるよう調整しています。

3.スライドの切り替わりとページネーションと自作した要素を連動させる

See the Pen swiper demo3 by mizuno (@mizuno_evo) on CodePen.

slideChangeTransitionStartとslideChangeTransitionEndを使用してswiper-containerの外にある自作した要素にアニメーションを付けています。

4.無限ループスライダー

See the Pen swiper demo4 by mizuno (@mizuno_evo) on CodePen.

delay: 0にすることで無限ループスライダーになります。
デフォルトにtransition-timing-function: ease-outとなっているので、CSSファイルの.swiper-wrapperにtransition-timing-function: linear !importantを当てることで一定の速さで流れるようにしています。
speed: 8000の値を変更することで流れるスピードを調整できます。