每个轮播单元具有自定义 css 的 Flickity 滑块

Question

我想设置自定义高度（和其他可能的东西）flickity 'carousel-cells' INDIVIDUALLY。我可以看到它是由 flickity package 本身用 javascript 以某种方式计算的。

我怎样才能覆盖它，创建这样的东西（使用较小的非活动幻灯片）？

。

我尝试将轮播单元格的高度设置为 300 像素，并将活动轮播（具有 class is-selected）的高度设置为 500 像素。那没有用。

.carousel-cell {
  width: 70%;
  height: 300px;
  background: #8C8;
}

.is-selected{
  height: 500px !important;
}

A simple codepen to get you started if you like.

Answer 1

您需要处理 asNavFor 示例，直到您获得像 CodePen

中这样的视图