React Swiperのbulletsを画像にしたい

設計キャプチャ

概要

• スワイパーのナビとして点がついているが、これを小さい画像にしてクリックした際にその画像にメイン画像を切り替えたい

参考

• Swiper React - replace bullets with images

React Swiper か React Slick か Swiper か

• https://npmtrends.com/react-slick-vs-react-swipe-vs-swiper
• 個人的な使用頻度は React Swiper > React Slickでしたが、トレンドはSwiperらしい
• 今回はReact Swiperを使って手軽に実装する
• 今後ライブラリを統一する場合は拡張性が高いSwiperに慣れた方がいいかもしれない。

既存のpaginationにbackground-imageを貼り付ける

• Pagination - Pagination moduleを設定して、点によるpaginationを表示する
• 下記のコードで動的にimgタグを挿入する
• やっていることは、React-swiperに備わっている.swiper-pagination-bulletエレメントの配列を取得して、そこに自作した<img>タグを挿入する、のみになります。

 const imageList = [{画像の情報オブジェクト}];
 const bullets = document.querySelectorAll('.swiper-pagination-bullet');
 if (bullets && bullets.length > 0) {
   bullets.forEach((bullet, i) => {
     let imgElement = document.createElement('img');
     imgElement.src = imageList[i].src;
     imgElement.width = 68;
     imgElement.height = 68;
     imgElement.alt = imageList[i].alt;
     bullets[i].appendChild(imgElement);
   });
 }

• あとは既存のCSSを上書きなどデザインの調整が必要です。
• 正規でカスタムできる方法などがあればな〜と思いました。もう少しスマートなやり方があれば、、
• いい方法については模索中です。

追記：2022/12/7
react-slickを使えば、customPagingプロパティを使って簡単にdotsをカスタムできる