Carousel - Aspect UI
The Carousel component lets you display a series of images or content in a slider format. It supports autoplay, swipe gestures, navigation arrows, and custom transitions for engaging UI experiences.
Table of Contents#
Default Carousel#
Custom Controls Carousel#
Autoplay Carousel#
The autoplay prop automatically plays carousel slides. You can install the required embla-carousel-autoplay package by running npm install embla-carousel-autoplay or yarn add embla-carousel-autoplay.
Card Props#
| Prop | Type | Default | Description |
|---|
| className | string | | Additional CSS classes to apply to the carousel |
| children | React.ReactNode | | The content of the carousel (CarouselItems, Controls, etc.) |
| options | EmblaOptionsType | {} | Embla carousel options. |
| plugins | EmblaPluginType[] | [] | Embla carousel plugins for adding more variants. |
| carouselViewportClasses | string | | Customize the viewport of the carousel container |
CarouselSlides Props#
| Prop | Type | Default | Description |
|---|
| className | string | | Additional CSS classes to apply to the carousel slides |
| children | React.ReactNode | | The content of the carousel slides |
CarouselItem Props#
| Prop | Type | Default | Description |
|---|
| className | string | | Additional CSS classes to apply to the carousel item |
| children | React.ReactNode | | The content of the carousel item |