前提・問題
Next.js + TypeScript環境下で、
プラグイン「Swiper」で画像のスライドショーを実装中です。
初期表示時にサムネイルのカレント表示することができない状況です。
(クリックすると、その時点以降はカレント表示は動作するようになります)
実現したいこと
- 初期表示時に、サムネイルに「.swiper-slide-thumb-active」というクラスを付与したい
- 初期表示時のコールバックを特定したい (おそらく「onInit」か「onAfterInit」)
- サムネイルに「.swiper-slide-thumb-active」を付与するためのSwiperの処理を記述したい
該当のソースコード
TypeScript
1 // 前略 2 return ( 3 <> 4 <Swiper 5 slidesPerView={1} 6 navigation={false} 7 loop={false} 8 initialSlide={0} // NOTE: 試しに追加。挙動に変化なし 9 modules={[Thumbs]} 10 thumbs={{ swiper: thumbsSwiper }} 11 > 12 {props.Images.map((src: string, index: number) => { 13 return ( 14 <SwiperSlide key={`${index}`}> 15 <Image src={src} layout="responsive" width={480} height={480} /> 16 </SwiperSlide> 17 ); 18 })} 19 </Swiper> 20 21 <Swiper 22 slidesPerView={10} 23 spaceBetween={4} 24 pagination={false} 25 navigation={false} 26 loop={false} 27 initialSlide={0} // NOTE: 試しに追加。挙動に変化なし 28 modules={[Thumbs]} 29 watchSlidesProgress 30 onSwiper={(swiper) => { 31 setThumbsSwiper; 32 }} 33 onClick={setThumbsSwiper} 34 onInit={(swiper) => { 35 // NOTE: クリック時に実行されて、カレント表示ができている 36 // 「setThumbsSwiper」をonInit時にも実行。うまくいかない。 37 console.log('thumbnail 初期化後'); 38 setThumbsSwiper; 39 }} 40 > 41 {thumbImages.map((src: string, index: number) => { 42 return ( 43 <SwiperSlide key={`${index}`}> 44 <Image src={src} layout="responsive" width={40} height={40} /> 45 </SwiperSlide> 46 ); 47 })} 48 </Swiper> 49 </> 50 ); 51 // 後略
(一部手を加えています。)
試したこと
-
https://swiperjs.com/swiper-api
https://swiperjs.com/react
を参考に「onInit」「onAfterInit」にて、「setThumbsSwiper」を実行 (しているつもり)。
(「setThumbsSwiper」はクリック時に実行され、その際にはカレント表示も描画される。) -
サムネイルのほうに「initialSlide={0}」を指定 (変化なし)
補足情報(FW/ツールのバージョンなど)
Next.js: 12.2.3
React: 18.1.0
TypeScript: 4.6.4
Swiper: 8.1.6
あなたの回答
tips
プレビュー