8
Components

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.


1
2
3
4
5

Installation

Install the Carousel component using the following command:

npx axionjs-ui add carousel

File Structure


Other Use Cases

1
2
3
4
5
1
2
3
4
5

Advanced Options

The Carousel component supports numerous configuration options through the opts prop, which is passed directly to Embla Carousel:

Looping

<Carousel opts={{ loop: true }}>
  {/* Your slides */}
</Carousel>

Autoplay

<Carousel 
  opts={{ 
    loop: true,
    autoplay: {
      delay: 3000, // 3 seconds
      stopOnInteraction: true,
      direction: "forward", // or "backward"
    }
  }}
>
  {/* Your slides */}
</Carousel>

Custom Alignment

<Carousel opts={{ align: "start" }}>
  {/* Your slides */}
</Carousel>

Available values: "start", "center", "end"


Props

PropTypeDefault
orientation
"horizontal" | "vertical"
"horizontal"
opts
CarouselOptions
-
plugins
CarouselPlugin
-
setApi
(api: CarouselApi) => void
-
ariaLabel
string
Carousel
ariaDescribedby
string
-

CarouselItem Props

PropTypeDefault
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.