Fluxo UIFluxo UIv0.1.1

Carousel

An image and content carousel with swipe gestures, autoplay, thumbnail navigation, and keyboard support.

Basic Usage

Image Carousel

A basic image carousel with dot navigation and arrow buttons.

Mountain landscape
import { Carousel } from 'fluxo-ui';
import type { CarouselSlide } from 'fluxo-ui';

const slides: CarouselSlide[] = [
  { id: 's1', type: 'image', src: '/photo1.jpg', alt: 'Mountain landscape' },
  { id: 's2', type: 'image', src: '/photo2.jpg', alt: 'Ocean sunset' },
  { id: 's3', type: 'image', src: '/photo3.jpg', alt: 'City skyline' },
];

<Carousel slides={slides} />

Thumbnail Navigation

Use navigation="thumbnails" to display a clickable thumbnail strip below (or beside) the carousel.

Thumbnail Navigation

Navigate slides using clickable thumbnail strip below the main viewport.

Slide 1
import { Carousel } from 'fluxo-ui';

<Carousel
  slides={slides}
  navigation="thumbnails"
  thumbnailPosition="bottom"
/>

Autoplay

Enable autoplay with loop for continuous slide rotation. Autoplay pauses on hover.

Autoplay with Loop

Slides advance automatically every 3 seconds and loop back to the first slide. Pauses on hover.

Slide 1
import { Carousel } from 'fluxo-ui';

<Carousel
  slides={slides}
  autoplay
  autoplayInterval={3000}
  loop
/>

Import

import { Carousel } from 'fluxo-ui';
import type { CarouselProps, CarouselSlide } from 'fluxo-ui';

Carousel Props

slidesreq
CarouselSlide[]

Array of slide data.

activeIndex
number

Controlled active slide index.

onSlideChange
(index: number) => void

Called when the active slide changes.

navigation
'dots' | 'arrows' | 'thumbnails' | 'none'"'dots'"

Navigation style.

thumbnailPosition
'top' | 'bottom' | 'left' | 'right'"'bottom'"

Position of thumbnail strip.

autoplay
boolean"false"

Enable automatic slide advancement.

autoplayInterval
number"5000"

Autoplay interval in milliseconds.

loop
boolean"false"

Loop back to first slide after the last.

showArrows
boolean"true"

Show previous/next arrow buttons.

showDots
boolean

Show dot indicators (overrides navigation).

lazyLoad
boolean"false"

Lazy-load images as they become active.

swipeable
boolean"true"

Enable swipe/drag gesture navigation.

aspectRatio
string

CSS aspect ratio for slides (e.g. "16/9").

className
string

Additional CSS class for the container.

slideClassName
string

Additional CSS class for each slide.

CarouselSlide Interface

idreq
string

Unique identifier for the slide.

typereq
'image' | 'video' | 'custom'

Slide content type.

src
string

Image URL (for image type).

alt
string

Alt text for the image.

thumbnail
string

Thumbnail URL for thumbnail navigation.

content
ReactNode

Custom content (for custom type).

Features

Swipe Gestures

Touch and pointer swipe support for mobile and desktop navigation.

Autoplay

Auto-advance slides at a configurable interval, pausing on hover.

Thumbnails

Thumbnail strip with configurable position for visual slide selection.

Keyboard Navigation

Arrow keys navigate between slides with focus management.

Lazy Loading

Only load slide content when it becomes active to reduce initial bandwidth.

Accessibility

ARIA roledescription, tab roles for dots, and labeled arrow buttons.