Carousel Examples

Live examples and demonstrations

Carousel / Slideshow

The Responsive Slot Layout includes a flexible carousel/slideshow component that supports both basic image carousels with navigation arrows and advanced slideshows with numbered indicators, autoplay, and pause controls. The carousel is fully responsive and includes keyboard navigation support for accessibility.

New to Carousels?

Get up and running in 5 minutes with our Quick Start Guide!

View Quick Start Guide
Basic Carousel Features
• Previous/Next navigation arrows
• Smooth fade transitions
• Optional captions for each slide
• Keyboard navigation support

Advanced Slider Features
• Numbered slide indicators
• Auto-rotation with configurable interval
• Pause/Resume controls
• Scrollable indicator track for many slides
data-auto-rotate="true" — Enable automatic slide rotation
data-interval="3" — Set rotation interval in seconds (default: 3)

Download RSL Example Pack

First Slideshow exmple on page

Advanced Slider with Auto-Rotation and Indicators

Slideshow Markup • HTML
Carousel Styles • CSS
Carousel Behavior • JavaScript

Second Slideshow exmple on page

Advanced Slider with Auto-Rotation and Indicators, with additional pause and play button outside of slideshow

Advanced Slider Markup • HTML
Pause/Resume Controls • JavaScript

document.addEventListener("DOMContentLoaded", function () {
    var pauseButton  = document.getElementById("pauseButton");
    var resumeButton = document.getElementById("resumeButton");
    var slider       = document.querySelector("#carousel-2");

    if (pauseButton) {
        pauseButton.addEventListener("click", function () {
            if (slider && typeof slider.pauseAutoRotate === "function") {
                slider.pauseAutoRotate();
            } else if (typeof pauseSlideshow === "function") {
                pauseSlideshow("#carousel-2");
            }
        });
    }

    if (resumeButton) {
        resumeButton.addEventListener("click", function () {
            if (slider && typeof slider.resumeAutoRotate === "function") {
                slider.resumeAutoRotate();
            } else if (typeof resumeSlideshow === "function") {
                resumeSlideshow("#carousel-2");
            }
        });
    }
});

♿ Accessibility Quick Notes