Carousel Component - JSON API Examples

Image carousel/slideshow with auto-rotation, pause controls, and keyboard navigation

Back to Component API Examples

Example 1: Basic Auto-Rotating Carousel (JSON API)

Render a carousel with auto-rotation using the JSON Layout API. The carousel automatically advances slides every 3 seconds.

JSON API Integration: The Carousel component automatically initializes when rendered via the JSON Layout API. Simply include the carousel HTML structure in your JSON configuration, and the component will handle all initialization, auto-rotation, and user interactions.
JavaScript Code • JS
const config = {
    version: 1,
    layoutId: "carousel-demo-1",
    breakpoints: { xs: 1 },
    items: [
        {
            id: "carousel-container",
            content: {
                type: "html",
                value: `
                    <div class="responsive-slot-layout">
                        <div class="slider" data-auto-rotate="true" data-interval="3">
                            <div class="slider-indicators-container">
                                <div class="carousel-prev-arrow slider-indicator">
                                    <i class="fas fa-chevron-left"></i>
                                </div>
                                <div class="slider-indicators-scroll">
                                    <div class="slider-indicators">
                                        <div class="slider-indicator active">1</div>
                                        <div class="slider-indicator">2</div>
                                        <div class="slider-indicator">3</div>
                                    </div>
                                </div>
                                <div class="carousel-next-arrow slider-indicator">
                                    <i class="fas fa-chevron-right"></i>
                                </div>
                            </div>
                            <div class="pause-container"></div>
                            <div class="carousel">
                                <div class="carousel-slide active">
                                    <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1200&h=600&fit=crop" alt="Slide 1" />
                                    <div class="carousel-caption">
                                        <h3>First Slide</h3>
                                        <p>Auto-rotation enabled</p>
                                    </div>
                                </div>
                                <div class="carousel-slide">
                                    <img src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=1200&h=600&fit=crop" alt="Slide 2" />
                                    <div class="carousel-caption">
                                        <h3>Second Slide</h3>
                                        <p>Pause on hover</p>
                                    </div>
                                </div>
                                <div class="carousel-slide">
                                    <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=1200&h=600&fit=crop" alt="Slide 3" />
                                    <div class="carousel-caption">
                                        <h3>Third Slide</h3>
                                        <p>Keyboard navigation</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `
            }
        }
    ]
};

// Render carousel via JSON API - component auto-initializes!
RSL.JSONLayout.renderLayout('#demo1-output', config);

Example 2: Fast Rotating Carousel (JSON API)

Render a carousel with faster auto-rotation (1.5 seconds) using the JSON Layout API.

JavaScript Code • JS
const config = {
    version: 1,
    layoutId: "carousel-demo-2",
    breakpoints: { xs: 1 },
    items: [{
        id: "carousel-container-2",
        content: {
            type: "html",
            value: `
                <div class="responsive-slot-layout">
                    <div class="slider" data-auto-rotate="true" data-interval="1.5">
                        <!-- Carousel structure with 4 slides -->
                        <!-- Auto-rotation every 1.5 seconds -->
                    </div>
                </div>
            `
        }
    }]
};

RSL.JSONLayout.renderLayout('#demo2-output', config);

Example 3: Manual Carousel (JSON API)

Render a carousel without auto-rotation using the JSON Layout API. User controls navigation.

JavaScript Code • JS
const config = {
    version: 1,
    layoutId: "carousel-demo-3",
    breakpoints: { xs: 1 },
    items: [{
        id: "carousel-container-3",
        content: {
            type: "html",
            value: `
                <div class="responsive-slot-layout">
                    <div class="slider" data-auto-rotate="false">
                        <!-- Carousel structure with 3 slides -->
                        <!-- Manual navigation only -->
                    </div>
                </div>
            `
        }
    }]
};

RSL.JSONLayout.renderLayout('#demo3-output', config);

Key Features

Public API

The Carousel component provides both automatic initialization and programmatic control:

Programmatic API • JavaScript
// Initialize all carousels on the page
RSL.Carousel.init();

// Initialize a specific carousel
const carouselContainer = document.querySelector('.responsive-slot-layout');
RSL.Carousel.create(carouselContainer);

// Per-carousel controls (attached to container element)
carouselContainer.carouselStartAutoRotate(); // Start auto-rotation
carouselContainer.carouselPause();          // Pause auto-rotation

// Global pause/resume (affects last initialized carousel)
window.carouselPause();   // Pause carousel
window.carouselResume();  // Resume carousel

// Automatically initialized on DOMContentLoaded
// Also auto-initialized when rendered via JSON Layout API

Example 4: JSON Layout API V2

Use the V2 JSON Layout API to declaratively create carousels. This approach provides a cleaner, more semantic way to define carousel slides.

JavaScript Code - V2 API • JS
// Create a carousel using V2 JSON Layout API
const layoutConfig = {
    version: 2,
    layoutId: 'carousel-demo',
    breakpoints: { xs: 1 },
    items: [
        {
            id: 'v2-carousel',
            content: {
                type: 'carousel',
                autoRotate: true,
                interval: 3,  // seconds
                slides: [
                    {
                        image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1200&h=600&fit=crop',
                        title: 'First Slide',
                        text: 'Auto-rotation enabled',
                        alt: 'Slide 1'
                    },
                    {
                        image: 'https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=1200&h=600&fit=crop',
                        title: 'Second Slide',
                        text: 'Pause on hover',
                        alt: 'Slide 2'
                    },
                    {
                        image: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=1200&h=600&fit=crop',
                        title: 'Third Slide',
                        text: 'Keyboard navigation',
                        alt: 'Slide 3'
                    }
                ]
            }
        }
    ]
};

// Render using the V2 API
const container = document.getElementById('carousel-container');
RSL.JSONLayout.renderLayout(container, layoutConfig);
Carousel Configuration Options • Reference
content: {
    type: 'carousel',

    // Auto-rotation settings (optional)
    autoRotate: true,           // Enable/disable auto-rotation (default: true)
    interval: 3,                // Rotation interval in seconds (default: 3)

    // Slides array (required)
    slides: [
        {
            image: 'path/to/image.jpg',  // Image source (optional)
            title: 'Slide Title',        // Caption title (optional)
            text: 'Slide description',   // Caption text (optional)
            alt: 'Alt text'              // Image alt text (optional)
        }
    ]
}

Features