← All elements
<div class="fc"><input type="radio" name="f" id="f1" checked><input type="radio" name="f" id="f2"><input type="radio" name="f" id="f3"><div class="s s1">One</div><div class="s s2">Two</div><div class="s s3">Three</div><div class="dots"><label for="f1"></label><label for="f2"></label><label for="f3"></label></div></div>About this carousel
A fading slideshow whose slides are chosen by radio dots, switching opacity with sibling selectors and no script.
How it works
Three slides are stacked in the same place with opacity zero. A radio group chooses which one is shown: selectors like #f2:checked ~ .s2 set the matching slide to full opacity, and a transition fades between them. The dots are labels for the radios, and the checked dot is bigger and brighter.
Ways to customise it
- Change the slide gradients and text.
- Edit the 0.5s fade duration.
- Add a slide, a radio and a dot, and extend the selector list.
Good to know
The radios give keyboard access and screen readers can find each one. There is no autoplay, which is friendlier for accessibility. Add labels to the dots in a real product.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.