swiper.jsのthumbnail送りをデモ以外の方法で実現する

swiper.jsには元々サムネイルページネーションが用意されておらず、デモではサムネイル用のスライダーを用意し、2つのsliderを動かすことでサムネイルっぽい動きを実行しています。
そのデモで用意されたThumbs Gallery With Two-way Controlは、理想的なサムネイルページネーションと動きが違うので、青丸のrenderBulletを利用してthumbnailを使ったpaginationを実現してみたいとおもいます。

DEMO


RAW HTML CSS CSS file JS

renderBulletの使い方

renderBulletはindexとclassNameを持ってます。
classNameには 1.要素のクラス と 2.アクティブ時のクラス が含まれます。
indexはスライド数分あります。thumbsの配列にスライドと同じ順番に設定することで、INDEX順にレンダリングします。

var thumbs = [];
var mySwiper = new Swiper('.swiper-container', {
    pagination: {
        // :
        renderBullet: function (index, className) {
          return '<span class="' + className + '" style="background-image:url('+ thumbs[index] +');"></span>';
        },
    },
});
ソースコード装飾ならGoogle code prettify

その他のオプション

項目 初期値 内容
$thumbs array サムネイル用の画像配列
pagination object ページネーション用のオプション
renderBullet null 青丸をレンダリングするフック
bulletClass ‘swiper-pagination-bullet’ 1.要素のクラスを上書き。defaultは青丸
bulletActiveClass ‘swiper-pagination-bullet-active’ 2.アクティブ時のクラス。defaultは青丸
しば に更新 1760文字 5,016view
※この記事は2年前の記事です。内容が古い可能性があります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください