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#

PropTypeDefaultDescription
classNamestringAdditional CSS classes to apply to the carousel
childrenReact.ReactNodeThe content of the carousel (CarouselItems, Controls, etc.)
optionsEmblaOptionsType{}Embla carousel options.
pluginsEmblaPluginType[][]Embla carousel plugins for adding more variants.
carouselViewportClassesstringCustomize the viewport of the carousel container

CarouselSlides Props#

PropTypeDefaultDescription
classNamestringAdditional CSS classes to apply to the carousel slides
childrenReact.ReactNodeThe content of the carousel slides

CarouselItem Props#

PropTypeDefaultDescription
classNamestringAdditional CSS classes to apply to the carousel item
childrenReact.ReactNodeThe content of the carousel item
Edit this pageTypography