Carousel.Root

The Root component is a key element in the Arc Carousel library. It serves as the top-level container for your carousel and provides various configuration options for customizing the carousel’s behavior and appearance.

Props

The Root component accepts the following props (all of them are optional):

HTMLAttributes<HTMLDivElement>

Inherits all HTML attributes for a div element since it can be used as a container.

orientation

• Type: 'horizontal' | 'vertical'
• Default: 'horizontal'

Specifies the orientation of the carousel, either horizontal or vertical.

slidesPerPage

• Type: number | Record<'base' | 'sm' | 'md' | 'lg' | 'xl' | '2xl', number>
• Default: 1

Determines the number of slides displayed on a single page of the carousel. The number of slides can be specified as a single number or an object containing breakpoints for different screen sizes.

The breakpoints are based on the Tailwind CSS breakpoints and are used to determine the number of slides displayed on a single page for different screen sizes.

For example, if you want to display 2 slides per page on small screens and 3 slides per page on medium screens, you can do the following:

<Carousel.Root
  slidesPerPage={{
    base: 1,
    sm: 2,
    md: 3,
  }}
>
  {/* Your carousel content goes here */}
</Carousel.Root>

initialPage

• Type: number
• Default: 0

Sets the initial page index when the carousel loads.

hasLoop

• Type: boolean
• Default: false

Determines whether the carousel should loop to the beginning/end when the user reaches the last/first slide.

asChild

• Type: boolean
• Default: false

If true, the Root component delegates its rendering to its single child element, while merging all the props passed to it.

transition

• Type: 'slide' | 'fade'
• Default: 'slide'

Specifies the type of transition between slides, either sliding or fading.

transitionDuration

• Type: number
• Default: 300

Defines the duration of the transition in milliseconds.

gap

• Type: number
• Default: 0

Sets the gap between slides in pixels.

autoplay

• Type: boolean
• Default: false

Controls whether the carousel should autoplay.

autoplayInterval

• Type: number
• Default: 3000

Specifies the autoplay interval in milliseconds.

Events

Root also accepts event handlers provided by the Events interface to respond to user interactions. The available event handlers include:

• onSlideClick: (index: number, event: React.MouseEvent) => void: Triggered when a slide is clicked.
• onPageChange: (prevIndex: number, nextIndex: number) => void: Triggered when the page changes.
• onPageChangeEnd: (index: number) => void: Triggered when the page change transition is completed.

Usage

Here is an example of how to use the Root component:

import React from 'react'
import { Carousel } from 'arc-carousel'

function MyCarousel() {
  return (
    <Carousel.Root
      orientation="horizontal"
      slidesPerPage={1}
      initialPage={0}
      hasLoop={false}
      transition="slide"
      transitionDuration={300}
      gap={0}
      autoplay={false}
      autoplayInterval={3000}
    >
      {/* Your carousel content goes here */}
    </Carousel.Root>
  )
}

export default MyCarousel

Remarks

• The Root component is designed to be the top-level container for your carousel and is typically used in conjunction with other components like Wrapper and Slide.
• Customize the Root component using the provided props to achieve the desired carousel behavior and appearance.
• Utilize the event handlers to respond to user interactions and control the behavior of your carousel.