Swiper，仅 reload/refresh 修复了显示问题

Question

颠簸。任何的想法？谢谢！

-

每个视图显示 3 slides/images，循环，居中。

有了干净的缓存，Swiper 从最后一张幻灯片开始，错过了右边的第一张幻灯片。浏览器刷新似乎可以解决此问题：第一张幻灯片滑动 starts/initializes，没有空白幻灯片。

图片数量是动态的。

更新：

问题出在我们添加的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

Swiper，仅 reload/refresh 修复了显示问题

Swiper, only reload/refresh fixes display issue

swiper