Carousel

A slideshow component for cycling through elements (images or text slides). Supports manual control arrows, indicators navigation, and automated sliding intervals.

First Slide

This is the first slide content area.

Second Slide

This is the second slide content area.

Third Slide

This is the third slide content area.

<!-- Carousel Wrapper -->
<div data-role="carousel" data-interval="4000" style="max-width: 600px; height: 300px;">
    
    <!-- Indicators -->
    <ul class="carousel-indicators">
        <li class="active"></li>
        <li></li>
        <li></li>
    </ul>

    <!-- Slides Wrapper -->
    <div class="carousel-inner">
        <div class="carousel-item active" style="background: #0078d7;">
            <h2>First Slide</h2>
        </div>
        <div class="carousel-item" style="background: #28a745;">
            <h2>Second Slide</h2>
        </div>
    </div>

    <!-- Controls -->
    <button class="carousel-control-prev">‹</button>
    <button class="carousel-control-next">›</button>
</div>

<!-- Auto-initialized by framework scanner -->

Usage Reference & API Options

Configure the slideshow using markup attributes and structures.

Option / Class	Type	Description
data-role="carousel"	HTML Attribute	Identifies element as a Carousel. Loaded automatically on load.
data-interval="..."	Number (ms)	Auto-play slide duration in milliseconds. Defaults to 5000ms. Set to 0 to disable auto-slide.
.carousel-indicators	Class	Bottom navigation pagination dots container. Tracks active indices.
.carousel-inner	Class	Container holding individual slides wrappers.
.carousel-item.active	Class	Represents a single active visible slide card. Only one active slide should be set initially.