Carousel
Carousel
A slideshow component with animations, touch gestures, and keyboard navigation.
Default
A basic carousel with navigation arrows.
1
2
3
4
5
With Indicators
Carousel with dot indicators showing the current slide.
1
2
3
4
5
Auto-Play
Carousel that automatically advances every 3 seconds.
1
2
3
4
5
Loop Mode
Infinite loop carousel — navigate past the last slide to return to the first.
1
2
3
4
5
Multiple Slides
Show multiple slides at once (3 slides per view).
1
2
3
4
5
6
7
8
9
10
Vertical Carousel
Navigate vertically instead of horizontally.
1
2
3
4
5
Image Gallery
Carousel with images and captions.
🌄
Mountain Sunrise
Beautiful morning view
🏖️
Beach Paradise
Tropical getaway
🌃
City Lights
Urban skyline at night
🌲
Forest Trail
Nature hiking path
🏔️
Snow Peaks
Winter wonderland
Current slide: 1 of 5
Without Navigation
Carousel without navigation arrows (swipe or drag only).
1
2
3
4
5
Swipe or drag to navigate
API Reference
Component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| ShowIndicators | bool | false | Show dot indicators below the carousel. |
| ShowNavigation | bool | true | Show previous/next arrow buttons. |
| AutoPlay | bool | false | Automatically advance slides. |
| AutoPlayInterval | int | 3000 | Interval in ms between auto-play advances. |
| Loop | bool | false | Whether to loop back to the first slide after the last. |
| SlidesPerView | int | 1 | Number of slides visible at once. |
| Gap | int | 0 | Gap in pixels between slides. |
| Orientation | CarouselOrientation | Horizontal | Scroll direction. Options: Horizontal, Vertical. |
| EnableDrag | bool | false | Allow click-drag to navigate slides. |
| OnSlideChange | EventCallback<int> | — | Fired when the active slide changes. Receives the zero-based index. |
| ContentClass | string? | — | Additional CSS classes for the slides container. |