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

Question

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

autoHeight: true, //enable auto height

这是AutoHeight 工作的官方演示。

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

这是AutoHeight的文档

注意：如果我添加 autoHeight 行，缩略图包装器也会发生同样的事情。在此处输入链接描述

Answer 1

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

还要添加此代码

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

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