【Swiper.js】initialSlideが効いていないと思っていた【React.js / Next.js】
Next.jsのプロジェクトで、Swiper.jsを用いたカルーセルを導入しています。
Swiper.jsには
initialSlide
というオプションがあり、デフォルトではinitialSlide={0}、オプション指定しなくても0がデフォルトになっています。
つまり配列ですと0番目になっているのですが、
1,2,3と、3枚のカード型カルーセルを実装していて、１がinitialSlideのはずなのに、2枚目がinitialSlideとして判定され、2枚目のスライドがデフォルト表示になってしまっていました。
この謎の現象を海外サイトで漁っても答えが出てこず・・・。
useEffectを利用して画面ロード時に0にする様にしてみたのですが、全く変わらず。
長い間ハマっていたのですが、0を他の数字に変えてみたらどうなるかと思いました。
現状、カルーセルのスライドでは2枚目が0と判定されているため、単純に2にすれば配列２番目で、つまり１番目のドットのスライドがデフォルトになるはず、と思いました。
initialSlide={2}
こうしたところ、やはり予想は当たり、
↑のように、期待していた動作をしてくれました。
initialSlideは、複数枚のスライドをカルーセルとして表示させる際、
ドットを左から右に展開し、その中間地点のスライドがデフォルト、つまり最初に表示されるスライドとして判定されていたようでした。
しかし・・・
他のページでもSwiperを利用していますが、そちらではinitialSlide={0}が正く動作し、ドット１番目が正常にデフォルトのスライドになっていました。
違いとしては、他のページではイメージが固定のため、配列で用意(const images = [...])しており、今回のページではAPIを叩き、画像をAPIから持ってきて処理している、という違いがあります。
両者で配列map処理をしていることに変わりはないため、何故差異が生まれているのか分かりませんが、多くの場合はAPIを叩いてデータを持ってくると思いますので、同じような症状が出てこのページに辿り着いた方は、
initialSlide={0}の数値を疑い、適宜修正するようにしてみてください。
時間があるときにSwiper.jsのGitHubにIssuesとして上げてみようかなと思いました。
Discussion