Phptpswipeでサムネイル一覧をプレビュー下部につけてみました。 with Swiper

下記内容を改良しました。↑↑↑

ある案件でウェブサイトを作成していたところ、サムネイル付きLightbox系のギャラリーを設置する要望がクライアントからありました。

↓↓↓ こんなやつ

普段はPhotoswipeのヘビーユーザーなのですが、デフォルトではサムネイルのナビゲーション機能はないようで、いろいろ検索して数件ヒットしましたが、下部のサムネイルはメイン画像に被せたくなかったので、検索から私の望むものは得られず。他の案件でも使えそうなので、自力でちゃんとカスタマイズしてみました。

その際にサムネイル部分のカルーセル系の動きをSwiperを利用させていただきました。これもヘビーユーザーです。

サムネイルだけではなく、その他自分好みの挙動に変更しています。
●クリック画像がそのまま大きくなったように見えるようにする（デフォルトでもありますが、もう少しそれっぽく見えるようにカスタム）。
●HTMLをゆるく設定できるようにする（あまりエラーが出ないようにしました）。
●data-gallery-title属性でキャプションのタイトルを設定できるようにする。

長いですが、Javascript、CSSのコードを記載しております。
動作サンプルも用意しました。

サンプル

サンプルはこちら
モダンなブラウザでは問題なく動くと思います。