Carousel
A flexible carousel component for creating interactive, scrollable sections with horizontal or vertical orientation.
Introduction
The Carousel
component is an advanced UI utility for displaying interactive and scrollable sections of content. Built with embla-carousel-react
, it supports both horizontal and vertical orientations and provides accessible navigation features.
Default Use Case: Single Carousel
Installation
Install the Carousel
component using the following command:
File Structure
Other Use Cases
Multiple Items Carousel
Vertical Carousel
Advanced Options
The Carousel component supports numerous configuration options through the opts
prop, which is passed directly to Embla Carousel:
Looping
Autoplay
Custom Alignment
Available values: "start"
, "center"
, "end"
Props
Prop | Type | Default |
---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" |
opts | CarouselOptions | - |
plugins | CarouselPlugin | - |
setApi | (api: CarouselApi) => void | - |
ariaLabel | string | Carousel |
ariaDescribedby | string | - |
CarouselItem Props
Prop | Type | Default |
---|---|---|
index | number | - |
total | number | - |
Features
Accessibility
The Carousel component is built with accessibility in mind:
- Keyboard Navigation: Supports arrow keys for navigating between slides
- ARIA Attributes: Includes proper labeling for screen readers
- Focus Management: Navigation buttons show proper focus states
Customization
- Horizontal & Vertical Orientation: Use the
orientation
prop to change the scroll axis - Customizable Buttons: Style the next/previous buttons using Button component props
- Flexible Layouts: Support for various item sizes and multiple items per view
- Rich API Access: Control the carousel programmatically using the
setApi
prop
Conclusion
The Carousel
component is a powerful tool for creating engaging and interactive content sliders. With its comprehensive accessibility features, flexible configuration options, and smooth animations, it provides an excellent solution for showcasing products, testimonials, image galleries, and more in modern web applications.