Zenn
🐘

React × Swiper で3つのカルーセルを同期させる

2024/09/20に公開
React
swiper
tech

概要

React × Swiper を使って、カルーセルを3つ同期させる実装をしました。2つのカルーセルを同期させることは Swiper を使って比較的簡単に実装できますが、3つの同期は少し工夫が必要でした。事例が少ないのか、それらしい記事が見つけられなかったためここに書き残します。

3つを同期させるとはどういうことか

今回は、A / B / Cという3つのカルーセルがあるとした場合の以下の挙動を想定しています。

  • AをスライドしたらBとCがスライドする
  • BをスライドしたらAとCがスライドする
  • Cは直接操作することはできず、AかBがスライドされたら同期される

プレビュー

使用技術

React 18.3.1
Swiper 11.1.1

コード解説

参考

以下の Thumbs のサンプルコードをベースにしています。Thumbs は2つのカルーセルを連動させる仕組みであるため、ref を使うことで3つのカルーセルの同期を実現しています。
https://swiperjs.com/react#thumbs
唯一同じようなことをしている以下の記事も参考にしました。
https://note.com/yanada_nomad/n/ncdc367b3cc56

詳細

上記の StackBlitz のコードではSwiper要素にいくつものオプションを付与していますが、同期させる上で必要なものだけを以下に抜粋します。

メインのSwiperで必要なオプションは以下の部分です。

メインのSwiper要素
    modules={[Thumbs]}
    // thumbs={{ swiper: thumbsSwiper }}
    thumbs={{
        swiper:
        thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null,
    }}

Swiper のドキュメントのサンプルコードでは、thumbs={{ swiper: thumbsSwiper }}と記述してありますが、それだとエラーになることもあります。その場合は上記のような書き方をしてください。
参考 : https://github.com/nolimits4web/swiper/issues/5630
 
 
メイン下部のSwiperで必要なオプションは以下の部分です。ここは Swiper のドキュメントのサンプルコードのままで OK です。

メイン下部のSwiper要素
  onSwiper={(swiper) => {
    setThumbsSwiper(swiper);
  }}
  modules={[Thumbs]}
  watchSlidesProgress

 
 
背景のSwiperのオプションは、以下のようにonSlideChangeTransitionEndでrefを参照することで他のスライドと同期させています。onSlideChangeTransitionEndはスライド遷移が終了したときに呼ばれます。

背景のSwiper要素
    onSlideChangeTransitionEnd={(swiper) => {
        swiperRef.current?.slideToLoop(swiper.realIndex, undefined, false);
    }}

さいごに

この記事が誰かの一助になれば幸いです🧤

Discussion