Navigation

Carousel

Rotating content viewport with previous/next controls, picker dots, and optional autoplay.

import { Carousel } from '@lostgradient/cinder/carousel';
navigationcarouselmedia
01

Overview

Composable slide rotator with controls, indicators, keyboard support, and optional autoplay.

Usage

svelte 
<script lang="ts">
  import { Carousel } from '@lostgradient/cinder/carousel';

  const slides = [
    { id: 'one', label: 'Welcome', title: 'Welcome', description: 'Start here' },
    { id: 'two', label: 'Features', title: 'Features', description: 'What is included' },
  ];
</script>

<Carousel {slides} autoplay />
Live preview
02

When to use

Use when
  • Presenting a finite set of visual highlights with sequential browsing controls.
  • Cycling between promotional or tutorial panels inside a single region.
Avoid when
  • Content should remain simultaneously visible and scannable. Use Grid instead
  • You only need one static hero panel with no sequence controls.
03

Examples

Basic carousel

Prev/next navigation with indicator dots and autoplay support.

04

Props

Props for carousel
Name Type Default Required Bindable Description
slides CarouselSlide[] req Ordered list of slides.
activeIndex number 0 bind Zero-based active index (bindable).
autoplay boolean false Enables interval-based auto-advance.
autoplayInterval number 5000 Milliseconds between auto-advance ticks.
label text 'Carousel' Accessible name for the carousel region.
description text Optional accessible description linked to the region.
controlLabels { previous?: string; next?: string; picker?: string; pause?: string; play?: string; } Override labels for controls and picker.
05

Accessibility

ArrowLeft/ ArrowRight/ Home/ End
Moves between slides.
Auto-advance pauses on hover and focus, and is disabled under reduced motion.