Swiper js autoheight 道具未调整第一张幻灯片的高度

Question

所以，我使用带有自动高度的 SwiperJs。我预计在幻灯片更改时，容器会根据内容调整其高度（在我的例子中是简单的图像）。它确实会在幻灯片更改时更新。

问题是，在第一次加载时，幻灯片似乎错误计算了高度并使其成为正方形，忽略了内容高度。

你可以在这里看看

这是我的依赖项：

"dependencies": {
      "next": "12.1.6",
      "react": "18.2.0",
      "react-dom": "18.2.0",
      "swiper": "^8.2.4"
    },

这是组件：

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

我添加了这两个属性，它似乎工作正常：

  observer: true,
  observeParents: true,