CSS3 slideshow without knowing the number of slide

Question

Since the development of CSS3, there are growing attempts to create browser-based effects (transitions and animations) merely based on CSS3 without using JavaScript. There are several examples of CSS3-based slideshows, but one thing is always lacking:

The common method for creating CSS3 slideshow is to induce sequencing delay for each slide. Thus, we need to know the number of slides and add a CSS rule for each corresponding element.

I am curious if there is another method to cycle a CSS3 slideshow without having the number of elements?

Answer 1

Use the starts-with selector to avoid a rule for each corresponding element:

section[id^=slide]:target {
opacity: 1;
z-index: 1;
-moz-transform: translate(0, 0);
}

section[id^=slide]:target ~ section[id^=slide] {
-moz-transform: translate(110%, 0);
}

References:

• Pure CSS Slides