I'm currently using SwiperJs with autoheight functionality. My expectation was that when the slide changes, the container would adjust its height based on the content (simple images in my case). It does update the height on slide change.
The issue arises upon initial load where the slide seems to miscalculate the height and makes it a square, disregarding the actual content height.
Here are my dependencies:
"dependencies": {
"next": "12.1.6",
"react": "18.2.0",
"react-dom": "18.2.0",
"swiper": "^8.2.4"
},
This is the component:
return (
<article className='card mb-8 block'>
<div className='w-full'>
<Swiper autoHeight loop spaceBetween={0} slidesPerView={1}>
{images.map((image, i) => {
return (
<SwiperSlide key={i}>
<div className='custom-img-container'>
<Image className='custom-img' layout='fill' src={image} objectFit='cover' />
</div>
</SwiperSlide>
)
})}
</Swiper>
</div>
</article>
)