javascript - 如何使用 flickity slider 设置每页图像数

Question

我正在为主页使用 flicikity slider 。我的问题是，每页不能设置超过 4 张图片。

我完整阅读了文档。我找不到完美的答案。

我使用 siema 包有一个名为“perPage: 1”的选项，这个选项解决了我的问题。但是没有这样的选择。此外，我尝试了一些 CSS 技巧，例如减小 width 和 height 大小。但是没有用。

Answer 1

我认为他们会自动在每个 div 上添加 slider 在此处查看 codepen 解决方案:

HTML

<div class="carousel"
  data-flickity='{ "wrapAround": true }'>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
</div>

CSS

* { box-sizing: border-box; }

body { font-family: sans-serif; }

.carousel {
  background: #EEE;
}

.carousel-cell {
  width: 66%;
  height: 200px;
  margin-right: 10px;
  background: #8C8;
  border-radius: 5px;
  counter-increment: carousel-cell;
}


.carousel-cell:before {
  display: block;
  text-align: center;
  content: counter(carousel-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}