← All elements
<div class="sc"><input type="radio" name="s" id="s1" checked><input type="radio" name="s" id="s2"><input type="radio" name="s" id="s3"><div class="c c1">One</div><div class="c c2">Two</div><div class="c c3">Three</div><div class="dots"><label for="s1"></label><label for="s2"></label><label for="s3"></label></div></div>About this carousel
Cards stacked with a slight offset where picking a dot brings that card to the front, switched by radio inputs.
How it works
Three radios control which card is on top. Non-selected cards are scaled down and shifted below with lower opacity, and the selected one returns to full size and a higher z-index. The dots are the radio labels.
Ways to customise it
- Change the card colours.
- Add a fourth card with another radio.
- Edit the scale and translate values.
Good to know
Radios give keyboard access. Add labels to the dots for assistive technology.
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.