## Carousel

Carousel components for cycling through elements like a slideshow.

### Basic Carousel

Slide 1
Slide 2
Slide 3
HTML

    <div
                style="
                    position: relative;
                    width: 100%;
                    max-width: 600px;
                    overflow: hidden;
                    border-radius: 12px;
                "
            >
                <div style="display: flex; transition: transform 0.5s ease">
                    <div
                        style="
                            min-width: 100%;
                            height: 300px;
                            background: linear-gradient(
                                135deg,
                                #667eea 0%,
                                #764ba2 100%
                            );
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            color: white;
                            font-size: 24px;
                            font-weight: 600;
                        "
                    >
                        Slide 1
                    </div>
                    <div
                        style="
                            min-width: 100%;
                            height: 300px;
                            background: linear-gradient(
                                135deg,
                                #f093fb 0%,
                                #f5576c 100%
                            );
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            color: white;
                            font-size: 24px;
                            font-weight: 600;
                        "
                    >
                        Slide 2
                    </div>
                    <div
                        style="
                            min-width: 100%;
                            height: 300px;
                            background: linear-gradient(
                                135deg,
                                #4facfe 0%,
                                #00f2fe 100%
                            );
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            color: white;
                            font-size: 24px;
                            font-weight: 600;
                        "
                    >
                        Slide 3
                    </div>
                </div>
            </div>

### Carousel with Navigation

Slide Content
HTML

    <div
                style="
                    position: relative;
                    width: 100%;
                    max-width: 600px;
                    border-radius: 12px;
                    overflow: hidden;
                "
            >
                <div
                    style="
                        height: 300px;
                        background: linear-gradient(
                            135deg,
                            #667eea 0%,
                            #764ba2 100%
                        );
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: white;
                        font-size: 24px;
                        font-weight: 600;
                    "
                >
                    Slide Content
                </div>
                <!-- Navigation Arrows -->
                <button
                    style="
                        position: absolute;
                        left: 16px;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                        background: rgba(255, 255, 255, 0.9);
                        border: none;
                        cursor: pointer;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 20px;
                        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
                    "
                >
                    ←
                </button>
                <button
                    style="
                        position: absolute;
                        right: 16px;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                        background: rgba(255, 255, 255, 0.9);
                        border: none;
                        cursor: pointer;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 20px;
                        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
                    "
                >
                    →
                </button>
            </div>

### Carousel with Indicators

Active Slide
HTML

    <div
                style="
                    position: relative;
                    width: 100%;
                    max-width: 600px;
                    border-radius: 12px;
                    overflow: hidden;
                "
            >
                <div
                    style="
                        height: 300px;
                        background: linear-gradient(
                            135deg,
                            #43e97b 0%,
                            #38f9d7 100%
                        );
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: white;
                        font-size: 24px;
                        font-weight: 600;
                    "
                >
                    Active Slide
                </div>
                <!-- Indicators -->
                <div
                    style="
                        position: absolute;
                        bottom: 16px;
                        left: 50%;
                        transform: translateX(-50%);
                        display: flex;
                        gap: 8px;
                    "
                >
                    <span
                        style="
                            width: 24px;
                            height: 4px;
                            border-radius: 2px;
                            background: white;
                        "
                    ></span>
                    <span
                        style="
                            width: 12px;
                            height: 4px;
                            border-radius: 2px;
                            background: rgba(255, 255, 255, 0.5);
                        "
                    ></span>
                    <span
                        style="
                            width: 12px;
                            height: 4px;
                            border-radius: 2px;
                            background: rgba(255, 255, 255, 0.5);
                        "
                    ></span>
                    <span
                        style="
                            width: 12px;
                            height: 4px;
                            border-radius: 2px;
                            background: rgba(255, 255, 255, 0.5);
                        "
                    ></span>
                </div>
            </div>

### Card Carousel

#### Card 1

Description text

#### Card 2

Description text

#### Card 3

Description text

#### Card 4

Description text

HTML

    <div
                style="
                    position: relative;
                    width: 100%;
                    overflow: hidden;
                    padding: 20px 0;
                "
            >
                <div
                    style="
                        display: flex;
                        gap: 16px;
                        overflow-x: auto;
                        scroll-snap-type: x mandatory;
                        padding: 0 16px;
                        scrollbar-width: none;
                    "
                >
                    <div
                        style="
                            min-width: 200px;
                            scroll-snap-align: start;
                            background: white;
                            border-radius: 12px;
                            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
                            overflow: hidden;
                        "
                    >
                        <div
                            style="
                                height: 120px;
                                background: linear-gradient(
                                    135deg,
                                    #667eea 0%,
                                    #764ba2 100%
                                );
                            "
                        ></div>
                        <div style="padding: 16px">
                            <h4 style="margin: 0 0 8px">Card 1</h4>
                            <p style="margin: 0; font-size: 14px; opacity: 0.7">
                                Description text
                            </p>
                        </div>
                    </div>
                    <div
                        style="
                            min-width: 200px;
                            scroll-snap-align: start;
                            background: white;
                            border-radius: 12px;
                            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
                            overflow: hidden;
                        "
                    >
                        <div
                            style="
                                height: 120px;
                                background: linear-gradient(
                                    135deg,
                                    #f093fb 0%,
                                    #f5576c 100%
                                );
                            "
                        ></div>
                        <div style="padding: 16px">
                            <h4 style="margin: 0 0 8px">Card 2</h4>
                            <p style="margin: 0; font-size: 14px; opacity: 0.7">
                                Description text
                            </p>
                        </div>
                    </div>
                    <div
                        style="
                            min-width: 200px;
                            scroll-snap-align: start;
                            background: white;
                            border-radius: 12px;
                            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
                            overflow: hidden;
                        "
                    >
                        <div
                            style="
                                height: 120px;
                                background: linear-gradient(
                                    135deg,
                                    #4facfe 0%,
                                    #00f2fe 100%
                                );
                            "
                        ></div>
                        <div style="padding: 16px">
                            <h4 style="margin: 0 0 8px">Card 3</h4>
                            <p style="margin: 0; font-size: 14px; opacity: 0.7">
                                Description text
                            </p>
                        </div>
                    </div>
                    <div
                        style="
                            min-width: 200px;
                            scroll-snap-align: start;
                            background: white;
                            border-radius: 12px;
                            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
                            overflow: hidden;
                        "
                    >
                        <div
                            style="
                                height: 120px;
                                background: linear-gradient(
                                    135deg,
                                    #43e97b 0%,
                                    #38f9d7 100%
                                );
                            "
                        ></div>
                        <div style="padding: 16px">
                            <h4 style="margin: 0 0 8px">Card 4</h4>
                            <p style="margin: 0; font-size: 14px; opacity: 0.7">
                                Description text
                            </p>
                        </div>
                    </div>
                </div>
            </div>

### Full Carousel Structure

## Slide One

This is the first slide.

## Slide Two

This is the second slide.

## Slide Three

This is the third slide.

HTML

    <div class="carousel carousel-slider">
                <div class="carousel-fixed-item">
                    <button class="button">Fixed CTA</button>
                </div>
                <div class="carousel-item active" id="carousel-slide-1">
                    <img src="/img/demo1.jpg" alt="Slide 1" />
                    <div class="carousel-caption">
                        <h2>Slide One</h2>
                        <p>This is the first slide.</p>
                    </div>
                </div>
                <div class="carousel-item" id="carousel-slide-2">
                    <img src="/img/demo2.jpg" alt="Slide 2" />
                    <div class="carousel-caption">
                        <h2>Slide Two</h2>
                        <p>This is the second slide.</p>
                    </div>
                </div>
                <div class="carousel-item" id="carousel-slide-3">
                    <img src="/img/demo3.jpg" alt="Slide 3" />
                    <div class="carousel-caption">
                        <h2>Slide Three</h2>
                        <p>This is the third slide.</p>
                    </div>
                </div>
                <div class="indicators">
                    <span
                        class="indicator-item active"
                        data-target="#carousel-slide-1"
                    ></span>
                    <span
                        class="indicator-item"
                        data-target="#carousel-slide-2"
                    ></span>
                    <span
                        class="indicator-item"
                        data-target="#carousel-slide-3"
                    ></span>
                </div>
            </div>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!