Skip to main content

Carousel

Carousel is a responsive, accessible slider. It supports keyboard arrows, touch/swipe, autoplay (pausing on hover/focus), and configurable transitions. It has two modes, so you can either let it manage a list of items or drive the current slide yourself.

Two modes​

ModeUse whenKey props
Items-drivenYou have an array and want the carousel to render + track it.items, renderItem
ControlledYou already track the index and just want navigation.itemCount, children (render function)

Import​

import { Carousel } from '@spartanfx/react';

Items-driven mode​

Pass items and a renderItem function. The carousel owns the current index.

<Carousel
  items={[
    { id: 1, data: { title: 'Slide 1', image: '/img1.jpg' } },
    { id: 2, data: { title: 'Slide 2', image: '/img2.jpg' } },
  ]}
  renderItem={(item) => (
    <figure>
      <img src={item.data.image} alt={item.data.title} />
      <figcaption>{item.data.title}</figcaption>
    </figure>
  )}
  autoPlay={{ enabled: true, interval: 4000 }}
/>

Controlled mode​

Pass itemCount and a render function as children. You receive the current index.

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

Common options​

These live on the shared base (available in both modes):

  • autoPlay — true for defaults or an object ({ enabled, interval }).
  • transition — animation config (slide, fade, none).
  • navigation — show/customize arrows and indicators.
  • keyboardNavigation (default true), touchEnabled (default true), swipeThreshold (default 50).
  • initialIndex (default 0) or currentIndex for controlled index.
  • maxWidth — cap and center the carousel.

See also​