Swiper，只重新加载/刷新修复显示问题

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;
}

删除最后一位（nth-child）会将滑块重置为始终从第一张幻灯片开始。但是这些图像停在彼此旁边，而是分开了。

创建它以更快地演示：

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