Carousel Component

🎠

Carousel Component

A simple, accessible carousel component using CSS scroll-snap and native scrolling behavior.

CSS-based scrolling with scroll-snap for smooth slide transitions
Fixed-width slides with consistent sizing
Prev/next buttons that slide out of view when disabled
Touch/swipe and mouse drag support
Keyboard navigation (arrow keys)
Respects reduced motion preferences
Full accessibility support with ARIA attributes

Basic Carousel

Slide 1

This is the first slide in our carousel.

Slide 2

This is the second slide with different content.

Slide 3

Here's the third slide with more information.

Slide 4

The fourth slide completes our set.

Slide 5

One more slide for good measure.

Image Carousel

Beach front view

Beach front view

Swimming with fish

Swimming with fish

Beach lounging

Ocean villas

Usage

Keyboard Navigation:

Use ← and → arrow keys to navigate
Buttons are automatically disabled at the beginning and end

Touch/Mouse:

Swipe left/right on touch devices
Click and drag with mouse
Click prev/next buttons