循环 2 在加载前隐藏幻灯片

Question

我已经看到了一些解决这个问题的尝试，但我无法让它们工作。

我像这样使用 cycle2：

<div id="slideShow" class="cycle-slideshow" data-cycle-slides="> div.slides" data-cycle-prev="#slideShowPrev" data-cycle-next="#slideShowNext">

它

运行良好，但在加载时，它会显示彼此下方的所有幻灯片。

我已经尝试了 cycle2 网站上建议的解决方案：

#slideshow img, #slideshow div { display: none }
#slideshow img.first { display: block }

但是，可悲的是，这似乎不起作用。

有没有人有一个简单的解决方案？

Answer 1

我认为这就是你需要的：

.slides {display: none;}
.slides.cycle-slide {display: block;}

这会隐藏您的幻灯片，直到加载插件并开始执行魔术。在您的 CSS 中，您正在向隐藏div 的图像子级添加一个显示块;如果你也想显示第一张幻灯片，直到插件的哨兵启动，你可以这样做：

.slides {display: none;}
.slides:first-child, .slides.cycle-slide {display: block;}