Zenn
👋

React Swiperのbulletsを画像にしたい

2022/10/04に公開
1件
React
swiper
reactswiper
tech

設計キャプチャ

概要

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

参考

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をカスタムできる

Discussion