前提・実現したいこと
現在、SwiperReactコンポーネントを使用して画像スライダーを実装しているのですが、別ページに遷移したときや別ページから帰ってきたときに画像が本来よりも大きいサイズで表示されてしまい、リロードをすると素の大きさに戻ってスライドしていくのですが、これはどのようなことが原因なのでしょうか?
また、正しく元の画像の大きさで表示されるにはどうすればいいでしょうか?
該当のソースコード
js
1import Rimage from "../common/images"; 2import Link from "next/dist/client/link"; 3import {Swiper,SwiperSlide} from "swiper/react"; 4import SwiperCore, { 5 Autoplay,Pagination,Navigation 6 } from 'swiper/core'; 7 SwiperCore.use([Autoplay]); 8 9export default function AutoSlide(props){ 10 let index = props.data 11 return( 12 <> 13 <div> 14 <Swiper autoplay={{ 15 'delay': 4500, 16 'disableOnInteraction': false 17 }} spaceBetween={30} slidesPerView={1.4} centeredSlides={true} loop={true} speed={700} 18 breakpoints={{"800":{"spaceBetween":50},"1100":{"slidesPerView":2.7}} }> 19 {index.map((value) => ( 20 <div> 21 <SwiperSlide > 22 <Link href={value.link} > 23 <a> 24 <div className="slideImg"> 25 <Rimage src={value.imgSrc} alt={value.alt} /> 26 </div> 27 </a> 28 </Link> 29 </SwiperSlide> 30 </div> 31 ))} 32 33 </Swiper> 34 </div> 35 36 <style jsx>{` 37 .slideImg{ 38 height:100%; 39 } 40 41 `}</style> 42 </> 43 ) 44}
試したこと
色々と調べて同じような状況かなと思える(https://teratail.com/questions/90243)質問を見つけたのですが、update()などここからどのように使用したら良いのかわからない状態です。swiperを初期化する必要があるのでしょうか?
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。