Carousel Component Test
Testing Embla-based carousel with various configurations
Basic Carousel (Relume Example)
1
2
3
4
5
Single Item
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Three Items Per View
1
2
3
4
5
6
7
8
9
With Loop
Loop 1
Loop 2
Loop 3
Loop 4
Loop 5
With API Control
1
2
3
4
5
Slide 0 of 0
Vertical Orientation
Vertical 1
Vertical 2
Vertical 3
Vertical 4
Vertical 5
Custom Styling
Card 1
Card 2
Card 3
Card 4
Card 5
Implementation Notes
- ✅ Built on Embla Carousel (https://www.embla-carousel.com/)
- ✅ Tabler icons (IconChevronLeft, IconChevronRight)
- ✅ Semicolons for consistency
- ✅ Shadcn's positioning (-left-12, -right-12) better than Relume's (left-0, right-0)
- ✅ Shadcn's h-8 w-8 sizing better than Relume's size-14
- ✅ Keyboard navigation (Arrow keys)
- ✅ API control for custom indicators
- ✅ Loop support via opts
- ✅ Vertical orientation support
- ✅ Responsive basis classes (basis-1/2, md:basis-1/3)