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

DEMO

RAW HTML CSS CSS file JS

renderBulletの使い方

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は青丸