flickity - Flickity 如何使轮播根据图像大小调整大小？

Question

我正在尝试实现类似于下图的效果。

蓝色 = 轮播幻灯片（作为图像）

绿色 = 轮播框架/视口/容器

红色 = 可见页面 (1440)

我有 5 张图像，所有图像都具有相同的分辨率（1024x576），我希望它们在根据屏幕尺寸放大/缩小的同时保持它们的比例。

我现在已经花了几个小时，但我一直无法实现我想要的。

我不想使用他们网站上大多数演示中显示的固定高度，因为在缩小到更小的设备时会出现问题。

我发布这个问题的原因是因为每当我尝试使用除固定高度以外的任何东西时，整个轮播都会崩溃，即使使用 AdaptiveHeight: true 和/或 setGallerySize: false 也是如此。

如果有帮助的话，我也在使用顺风。

任何帮助表示赞赏。

score 0 · Accepted Answer

也许你可以只通过 css 调整像这个演示这样的图像：

.carousel img {
  display: block;
  height: 200px;
}

score 0 · Accepted Answer

.carousel-cell {
  min-height: 100%;
  width: 100%;
}

.carousel-cell img {
  width: 100%;
}

在样式上使用min-height而不是似乎有助于避免干扰 Flickity 的内部计算。height.carousel-cell

2 回答 2