Carousel

@spartanfx/react v1.0.4

---

@spartanfx/react / Carousel

Function: Carousel()

Carousel<T>(props): ReactElement

Carousel is a fully responsive, accessible carousel/slider component.

Supports two operating modes:

Items-driven mode: The carousel manages its own items internally. Pass an items array and a renderItem function.

Controlled mode: The carousel only handles navigation. Pass itemCount and a render function as children.

Features:

• Keyboard navigation (arrow keys)
• Touch/swipe gestures
• Auto-play with pause on hover/focus
• Multiple transition effects (slide, fade, none)
• Customizable navigation and indicators
• Full ARIA accessibility support

Type Parameters

T

T = unknown

The type of data in carousel items (for items-driven mode)

Parameters

props

ICarouselProps<T>

Returns

ReactElement

Example

// Items-driven mode
<Carousel
  items={[
    { id: 1, data: { title: 'Slide 1', image: '/img1.jpg' } },
    { id: 2, data: { title: 'Slide 2', image: '/img2.jpg' } },
  ]}
  renderItem={(item, index, isActive) => (
    <div>
      <img src={item.data.image} alt={item.data.title} />
      <h2>{item.data.title}</h2>
    </div>
  )}
  autoPlay={{ enabled: true, interval: 4000 }}
/>

// Controlled mode
<Carousel itemCount={3}>
  {(currentIndex) => (
    <div>Current slide: {currentIndex + 1}</div>
  )}
</Carousel>