AutoWidth 使元素消失？ - 包括示例和文档

Question

我正在使用 SwiperJs 构建一个简单的画廊。 一切正常，除了当我尝试使滑块适应内容的高度时，它消失了。

autoHeight: true, //enable auto height

这是 AutoHeight 工作的official demo。

这里是my demo。 （删除演示中的“//”以查看滑块消失。

这是 AutoHeight 的 documentation

注意：如果我添加 autoHeight 行，缩略图包装器也会发生同样的情况。 enter link description here

Answer 1

我检查了您的代码，发现如果您要将自动高度设置为 tru，则此类名称“.swiper-container-autoheight .swiper-slide”将具有 css 高度：自动，这意味着您没有将最小高度设置为您的幻灯片，但如果您删除自动高度，它将自动为您的幻灯片设置 100% 的 CSS 高度。

同时添加此代码

.gallery-top .swiper-slide-container{
  min-height: 300px
}

因为您没有在每张幻灯片中设置高度，所以您使用的图像是背景，并且幻灯片元素没有显示图像的高度，除非您将 img 标签放在幻灯片中，否则它将使您的高度幻灯片将相对于图像的高度，然后自动高度功能将起作用。