Swiper js autoheight prop not resizing for first slide height

Question

So, I'm using SwiperJs with autoheight. I expected that on slide change the container adapts its height depending on the content (simple images in my case). And it does update on slide change.

The problem is that on first load the slide seems to miscalculate the height and makes it a square, ignoring the content height.

This 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>
)

Answer 1

I added these two properties and it seems to work fine:

  observer: true,
  observeParents: true,