Carousel Component

Slides Only (Scrollable)

This carousel uses CSS Scroll Snap for a smooth, swipeable experience on touch devices and trackpads. No controls are needed.

Card 1

Scroll horizontally

Card 2

to see the next card

Card 3

snap into place.

Card 4

This is card four.

<div class="scroll-carousel">
    <div class="slide"><div class="demo-card">...</div></div>
    <div class="slide"><div class="demo-card">...</div></div>
    <div class="slide"><div class="demo-card">...</div></div>
</div>

With Controls

This version uses hidden radio buttons and labels to create previous/next arrows. It is not scrollable.

Card 1

Click the arrows to navigate.

Card 2

This is the second slide.

Card 3

This is the final slide.

<!-- Radio inputs to manage state -->
<input type="radio" name="carousel-controls" id="slide1-ctrl" checked>
<input type="radio" name="carousel-controls" id="slide2-ctrl">
...
<div class="radio-carousel-viewport">
    <div class="slide">...</div>
    <div class="slide">...</div>
</div>
<!-- Labels act as next/prev buttons -->
<label for="slide2-ctrl" class="carousel-control next"></label>
<label for="slide1-ctrl" class="carousel-control prev"></label>
...

With Indicators

This version adds indicator dots to the bottom, which also function as navigation controls.

Card 1

Click the dots to jump to a slide.

Card 2

The active dot is highlighted.

Card 3

This combines all features.

<!-- Add a container for the indicator labels -->
<div class="carousel-indicators">
    <label for="slide1-ind" class="indicator-dot"></label>
    <label for="slide2-ind" class="indicator-dot"></label>
    <label for="slide3-ind" class="indicator-dot"></label>
</div>