Question

颠簸。任何想法？谢谢！

-

每个视图以循环，居中显示3张幻灯片/图像。

使用干净的缓存，Swiper从最后一张幻灯片开始，而错过了右边的第一张幻灯片。浏览器刷新似乎可以解决该问题：swiper从第一张幻灯片开始/初始化，没有空白幻灯片。

图像数量是动态的。

更新：

问题在于我们添加的CSS：

.swiper-container {
    width: 100%; height: 100%;
    margin-left: auto; margin-right: auto;
}

.swiper-slide {
    max-width: 1200px;
    height: auto;
    text-align: center;
    line-height: 0;
}

.swiper-slide img {
    height: 550px;
    width: auto;
}

.swiper-slide:nth-child(1n) {
    height: 550px;
    width: auto;
}

删除最后一位（第n个孩子）会将滑块重置为始终从第一张幻灯片开始。但是图像不再相邻放置，而是散开了。

创建此文件是为了更快地演示它：

http://jsfiddle.net/L3b1fzh9/13/

Answer 1

您可以删除CSS的最后几行，因为.swiper-slide:nth-child(1n)与每个.swiper-slide元素都匹配，因此此选择器实际上不执行任何操作（ n 是一个的整数，所以当您乘以1时，您将得到0、1、2等。

图像停止并排放置的原因是其父容器.swiper-slide具有width: 100%。您需要将其更改为width: auto并添加margin: 0 auto以使幻灯片居中。

因此，您的.swiper-slide CSS变为：

.swiper-slide {
  max-width: 1200px;
  height: auto;
  text-align: center;
  line-height: 0;
  width: auto !important;
  margin: 0 auto;
}

然后删除.swiper-slide:nth-child(1n) CSS。

Updated fiddle

刷卡，仅重新加载/刷新修复了显示问题

1 个答案: