ObjectUIObjectUI
ComponentsComplex

Carousel

Slideshow component for cycling through content

The Carousel component displays content in a slideshow format with navigation controls.

Basic Usage

Simple Carousel

Slide 1
Slide 2
Slide 3

Without Arrows

No Arrows

1
2
3

Schema

interface CarouselSchema {
  type: 'carousel';
  
  // Configuration
  orientation?: 'horizontal' | 'vertical';  // Carousel direction (default: 'horizontal')
  showArrows?: boolean;                     // Show navigation arrows (default: true)
  
  // Items
  items: SchemaNode[][];                    // Array of slides (each slide is an array of components)
  
  // Options
  opts?: {
    loop?: boolean;                         // Enable infinite loop
    align?: 'start' | 'center' | 'end';    // Slide alignment
  };
  
  // Styling
  className?: string;                       // Container CSS classes
  itemClassName?: string;                   // Individual slide CSS classes
  
  // Base properties
  id?: string;
  visible?: boolean | string;
  testId?: string;
}

Examples

Photo Gallery

Photo 1
Photo 2
Photo 3
Photo 4

Product Showcase

Products

Product 1Amazing features and quality$99.99
Product 2Premium quality guarantee$149.99
Product 3Best value for money$79.99

Testimonials

Customer Reviews

"This product changed my life!"— Sarah Johnson
"Absolutely fantastic experience."— Mike Chen
"Highly recommended to everyone!"— Emma Davis

On this page