Recruit

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

Blog

Isamu Mizuno

Senior Engineer

こんにちはミズノです。
スライダーのライブラリではおなじみの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の値を変更することで流れるスピードを調整できます。

5.スクロールバーを付ける

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


スクロール系のカスタマイズも豊富にあるので知っておくと便利。

まとめ

今回のDEMOはバージョン4.5.1を使用しており他バージョンでは記述が違うとこもあるので注意してください。
改めてオプションが豊富で幅広く対応できる便利なライブラリだと思いました。
以上、Swiperのカスタマイズ紹介でした。

参考サイト

Return back

Recommend

Contact Us