Carousel
A slideshow component with animations, touch gestures, and keyboard navigation.
Default
A basic carousel with navigation arrows.
With Indicators
Carousel with dot indicators showing the current slide.
Auto-Play
Carousel that automatically advances every 3 seconds.
Loop Mode
Infinite loop carousel — navigate past the last slide to return to the first.
Multiple Slides
Show multiple slides at once (3 slides per view).
Vertical Carousel
Navigate vertically instead of horizontally.
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).
Swipe or drag to navigate
Dots Position
Control where dot indicators appear using the DotsPosition parameter.
Bottom (default)
Top
API Reference
Component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| ShowIndicators | bool | false | Show dot indicators below the carousel. |
| DotsPosition | CarouselDotsPosition | Auto | Position of dot indicators. Auto resolves based on Orientation. |
| 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. |