I'm using react-swiper with next js creating an album.
When I write the below code it works fine with img tag:
<Swiper
style={
{
'--swiper-navigation-color': '#fff',
'--swiper-pagination-color': '#fff',
} as any
}
pagination={{
type: 'fraction',
horizontalClass:
'bg-[#f1f1f180] py-1 w-14 rounded-md opacity-0 z-10 group-hover:opacity-100',
}}
zoom
navigation
keyboard
spaceBetween={15}
onSwiper={swiper => {ref.current = swiper}}
thumbs={{
swiper:
thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null,
}}
dir="rtl"
modules={[FreeMode, Navigation, Thumbs, Zoom, Pagination, Keyboard]}
className="ModalSwiper relative ImageModalGallery group">
{images &&
images.map((image: string, index: number) => (
<SwiperSlide key={index}>
<div className="md:w-[500px] h-[350px] md:h-[450px] swiper-zoom-container relative">
<img
src={`${BASEURL}/Api/Files/${image}`}
className="rounded"
/>
</div>
</SwiperSlide>
))}
{/* zoom in and zoom out icons */}
<div className="flex justify-center absolute bottom-0 w-full mx-auto text-white z-50">
<button
className=""
style={{ width: '30px' }}
onClick={() => {ref.current.zoom.in()}}>
<svg
className="App-buttonIcon"
viewBox="0 0 24 24"
fill="white">
<path d="M12 ... 0-2z" />
</svg>
</button>
<button className="" style={{ width: '30px' }}>
<svg
className=""
viewBox="0 0 24 24"
fill="white"
onClick={() => {ref.current.zoom.in()}}>
<path d="M12 ... 0-2z" />
</svg>
</button>
</div>
</Swiper>
In the same code when I replace img tag with Next js Image tag I can not zoom in and out of image :
<SwiperSlide key={index}>
<div className="md:w-[500px] h-[350px] md:h-[450px] swiper-zoom-container relative">
<Image
src={`${BASEURL}/Api/Files/${image}`}
className="rounded"
objectFit="contain"
layout="fill"
/>
</div>
</SwiperSlide>
thanks in advance for any suggestions and answers!
