Cycle2 скрыть слайды перед загрузкой

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; если вы хотите показать 1-й слайд, пока вы не получите дозор плагина, вы можете сделать это:

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