## Slideshow

Image and content slideshow components with navigation and indicators.

### Basic Slideshow

Slide 1
HTML

    <div
                class="slideshow"
                style="
                    position: relative;
                    max-width: 600px;
                    aspect-ratio: 16/9;
                    overflow: hidden;
                    border-radius: 12px;
                "
            >
                <div class="slideshow__slides" style="display: flex; height: 100%">
                    <div
                        class="slideshow__slide active"
                        style="
                            min-width: 100%;
                            background: linear-gradient(
                                135deg,
                                #667eea 0%,
                                #764ba2 100%
                            );
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            color: white;
                            font-size: 24px;
                            font-weight: 500;
                        "
                    >
                        Slide 1
                    </div>
                </div>
                <button
                    class="slideshow__prev"
                    style="
                        position: absolute;
                        left: 16px;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 44px;
                        height: 44px;
                        background: rgba(255, 255, 255, 0.9);
                        border: none;
                        border-radius: 50%;
                        cursor: pointer;
                        font-size: 18px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    "
                >
                    ←
                </button>
                <button
                    class="slideshow__next"
                    style="
                        position: absolute;
                        right: 16px;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 44px;
                        height: 44px;
                        background: rgba(255, 255, 255, 0.9);
                        border: none;
                        border-radius: 50%;
                        cursor: pointer;
                        font-size: 18px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    "
                >
                    →
                </button>
            </div>

### Slideshow with Indicators

HTML

    <div
                class="slideshow"
                style="
                    position: relative;
                    max-width: 600px;
                    aspect-ratio: 16/9;
                    overflow: hidden;
                    border-radius: 12px;
                "
            >
                <div class="slideshow__slides" style="height: 100%">
                    <div
                        class="slideshow__slide active"
                        style="
                            width: 100%;
                            height: 100%;
                            background: linear-gradient(
                                135deg,
                                #f093fb 0%,
                                #f5576c 100%
                            );
                        "
                    ></div>
                </div>
                <div
                    class="slideshow__indicators"
                    style="
                        position: absolute;
                        bottom: 20px;
                        left: 50%;
                        transform: translateX(-50%);
                        display: flex;
                        gap: 10px;
                    "
                >
                    <button
                        class="slideshow__dot active"
                        style="
                            width: 12px;
                            height: 12px;
                            background: white;
                            border: none;
                            border-radius: 50%;
                            cursor: pointer;
                            opacity: 1;
                        "
                    ></button>
                    <button
                        class="slideshow__dot"
                        style="
                            width: 12px;
                            height: 12px;
                            background: white;
                            border: none;
                            border-radius: 50%;
                            cursor: pointer;
                            opacity: 0.5;
                        "
                    ></button>
                    <button
                        class="slideshow__dot"
                        style="
                            width: 12px;
                            height: 12px;
                            background: white;
                            border: none;
                            border-radius: 50%;
                            cursor: pointer;
                            opacity: 0.5;
                        "
                    ></button>
                    <button
                        class="slideshow__dot"
                        style="
                            width: 12px;
                            height: 12px;
                            background: white;
                            border: none;
                            border-radius: 50%;
                            cursor: pointer;
                            opacity: 0.5;
                        "
                    ></button>
                </div>
            </div>

### Slideshow with Captions

### Amazing Landscape

Discover the beauty of nature

HTML

    <div
                class="slideshow"
                style="
                    position: relative;
                    max-width: 600px;
                    aspect-ratio: 16/9;
                    overflow: hidden;
                    border-radius: 12px;
                "
            >
                <div
                    class="slideshow__slide"
                    style="
                        width: 100%;
                        height: 100%;
                        background: linear-gradient(
                            135deg,
                            #4facfe 0%,
                            #00f2fe 100%
                        );
                    "
                >
                    <div
                        class="slideshow__caption"
                        style="
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            right: 0;
                            padding: 40px 24px 24px;
                            background: linear-gradient(
                                transparent,
                                rgba(0, 0, 0, 0.7)
                            );
                            color: white;
                        "
                    >
                        <h3 style="margin: 0 0 8px; font-size: 20px">
                            Amazing Landscape
                        </h3>
                        <p style="margin: 0; opacity: 0.9; font-size: 14px">
                            Discover the beauty of nature
                        </p>
                    </div>
                </div>
                <button
                    class="slideshow__prev"
                    style="
                        position: absolute;
                        left: 16px;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 40px;
                        height: 40px;
                        background: rgba(255, 255, 255, 0.2);
                        backdrop-filter: blur(4px);
                        border: none;
                        border-radius: 50%;
                        cursor: pointer;
                        color: white;
                        font-size: 16px;
                    "
                >
                    ←
                </button>
                <button
                    class="slideshow__next"
                    style="
                        position: absolute;
                        right: 16px;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 40px;
                        height: 40px;
                        background: rgba(255, 255, 255, 0.2);
                        backdrop-filter: blur(4px);
                        border: none;
                        border-radius: 50%;
                        cursor: pointer;
                        color: white;
                        font-size: 16px;
                    "
                >
                    →
                </button>
            </div>

### Thumbnail Navigation

HTML

    <div class="slideshow slideshow--thumbnails" style="max-width: 600px">
                <div
                    style="
                        position: relative;
                        aspect-ratio: 16/9;
                        overflow: hidden;
                        border-radius: 12px;
                        margin-bottom: 12px;
                    "
                >
                    <div
                        class="slideshow__slide"
                        style="
                            width: 100%;
                            height: 100%;
                            background: linear-gradient(
                                135deg,
                                #43e97b 0%,
                                #38f9d7 100%
                            );
                        "
                    ></div>
                </div>
                <div class="slideshow__thumbs" style="display: flex; gap: 8px">
                    <button
                        class="slideshow__thumb active"
                        style="
                            flex: 1;
                            aspect-ratio: 16/9;
                            background: linear-gradient(
                                135deg,
                                #43e97b 0%,
                                #38f9d7 100%
                            );
                            border: 3px solid var(--color_fill_primary);
                            border-radius: 6px;
                            cursor: pointer;
                        "
                    ></button>
                    <button
                        class="slideshow__thumb"
                        style="
                            flex: 1;
                            aspect-ratio: 16/9;
                            background: linear-gradient(
                                135deg,
                                #fa709a 0%,
                                #fee140 100%
                            );
                            border: 3px solid transparent;
                            border-radius: 6px;
                            cursor: pointer;
                            opacity: 0.7;
                        "
                    ></button>
                    <button
                        class="slideshow__thumb"
                        style="
                            flex: 1;
                            aspect-ratio: 16/9;
                            background: linear-gradient(
                                135deg,
                                #667eea 0%,
                                #764ba2 100%
                            );
                            border: 3px solid transparent;
                            border-radius: 6px;
                            cursor: pointer;
                            opacity: 0.7;
                        "
                    ></button>
                    <button
                        class="slideshow__thumb"
                        style="
                            flex: 1;
                            aspect-ratio: 16/9;
                            background: linear-gradient(
                                135deg,
                                #f093fb 0%,
                                #f5576c 100%
                            );
                            border: 3px solid transparent;
                            border-radius: 6px;
                            cursor: pointer;
                            opacity: 0.7;
                        "
                    ></button>
                </div>
            </div>

### Fullscreen Style Slideshow

## Welcome

Explore our collection

01 / 04
HTML

    <div
                class="slideshow slideshow--fullscreen"
                style="
                    position: relative;
                    max-width: 700px;
                    aspect-ratio: 16/9;
                    overflow: hidden;
                    border-radius: 12px;
                    background: #000;
                "
            >
                <div
                    class="slideshow__slide"
                    style="
                        width: 100%;
                        height: 100%;
                        background: linear-gradient(
                            135deg,
                            #0f0c29 0%,
                            #302b63 50%,
                            #24243e 100%
                        );
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    "
                >
                    <div style="text-align: center; color: white">
                        <h2
                            style="
                                margin: 0 0 16px;
                                font-size: 36px;
                                font-weight: 300;
                            "
                        >
                            Welcome
                        </h2>
                        <p style="margin: 0 0 24px; opacity: 0.8">
                            Explore our collection
                        </p>
                        <button
                            style="
                                padding: 12px 32px;
                                background: white;
                                color: #302b63;
                                border: none;
                                border-radius: 24px;
                                font-weight: 500;
                                cursor: pointer;
                            "
                        >
                            Get Started
                        </button>
                    </div>
                </div>
                <div
                    style="
                        position: absolute;
                        bottom: 24px;
                        left: 24px;
                        color: white;
                        font-size: 14px;
                    "
                >
                    <span style="opacity: 0.7">01</span>
                    /
                    <span>04</span>
                </div>
                <div
                    style="
                        position: absolute;
                        bottom: 24px;
                        right: 24px;
                        display: flex;
                        gap: 8px;
                    "
                >
                    <button
                        style="
                            width: 48px;
                            height: 48px;
                            background: rgba(255, 255, 255, 0.1);
                            border: 1px solid rgba(255, 255, 255, 0.3);
                            border-radius: 50%;
                            color: white;
                            cursor: pointer;
                        "
                    >
                        ←
                    </button>
                    <button
                        style="
                            width: 48px;
                            height: 48px;
                            background: rgba(255, 255, 255, 0.1);
                            border: 1px solid rgba(255, 255, 255, 0.3);
                            border-radius: 50%;
                            color: white;
                            cursor: pointer;
                        "
                    >
                        →
                    </button>
                </div>
            </div>

### Card Slideshow

#### Card Title

Short description text

#### Another Card

Description here

#### Third Card

More content

HTML

    <div class="slideshow slideshow--cards" style="padding: 20px 0">
                <div
                    style="
                        display: flex;
                        gap: 16px;
                        overflow-x: auto;
                        scroll-snap-type: x mandatory;
                        padding: 0 16px;
                    "
                >
                    <div
                        class="slideshow__card"
                        style="
                            min-width: 280px;
                            scroll-snap-align: start;
                            background: white;
                            border-radius: 12px;
                            overflow: hidden;
                            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
                        "
                    >
                        <div
                            style="
                                aspect-ratio: 4/3;
                                background: linear-gradient(
                                    135deg,
                                    #667eea 0%,
                                    #764ba2 100%
                                );
                            "
                        ></div>
                        <div style="padding: 16px">
                            <h4 style="margin: 0 0 8px">Card Title</h4>
                            <p style="margin: 0; font-size: 14px; opacity: 0.7">
                                Short description text
                            </p>
                        </div>
                    </div>
                    <div
                        class="slideshow__card"
                        style="
                            min-width: 280px;
                            scroll-snap-align: start;
                            background: white;
                            border-radius: 12px;
                            overflow: hidden;
                            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
                        "
                    >
                        <div
                            style="
                                aspect-ratio: 4/3;
                                background: linear-gradient(
                                    135deg,
                                    #f093fb 0%,
                                    #f5576c 100%
                                );
                            "
                        ></div>
                        <div style="padding: 16px">
                            <h4 style="margin: 0 0 8px">Another Card</h4>
                            <p style="margin: 0; font-size: 14px; opacity: 0.7">
                                Description here
                            </p>
                        </div>
                    </div>
                    <div
                        class="slideshow__card"
                        style="
                            min-width: 280px;
                            scroll-snap-align: start;
                            background: white;
                            border-radius: 12px;
                            overflow: hidden;
                            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
                        "
                    >
                        <div
                            style="
                                aspect-ratio: 4/3;
                                background: linear-gradient(
                                    135deg,
                                    #4facfe 0%,
                                    #00f2fe 100%
                                );
                            "
                        ></div>
                        <div style="padding: 16px">
                            <h4 style="margin: 0 0 8px">Third Card</h4>
                            <p style="margin: 0; font-size: 14px; opacity: 0.7">
                                More content
                            </p>
                        </div>
                    </div>
                </div>
            </div>

### Slideshow with Progress

🎯

### Step 1 of 4

Getting started with the basics

HTML

    <div class="slideshow slideshow--progress" style="max-width: 600px">
                <div
                    class="slideshow__progress"
                    style="display: flex; gap: 4px; margin-bottom: 12px"
                >
                    <div
                        style="
                            flex: 1;
                            height: 3px;
                            background: var(--color_fill_primary);
                            border-radius: 2px;
                        "
                    ></div>
                    <div
                        style="
                            flex: 1;
                            height: 3px;
                            background: var(--color_line_secondary);
                            border-radius: 2px;
                        "
                    ></div>
                    <div
                        style="
                            flex: 1;
                            height: 3px;
                            background: var(--color_line_secondary);
                            border-radius: 2px;
                        "
                    ></div>
                    <div
                        style="
                            flex: 1;
                            height: 3px;
                            background: var(--color_line_secondary);
                            border-radius: 2px;
                        "
                    ></div>
                </div>
                <div
                    style="
                        position: relative;
                        aspect-ratio: 16/9;
                        overflow: hidden;
                        border-radius: 12px;
                    "
                >
                    <div
                        class="slideshow__slide"
                        style="
                            width: 100%;
                            height: 100%;
                            background: linear-gradient(
                                135deg,
                                #fa709a 0%,
                                #fee140 100%
                            );
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        "
                    >
                        <div style="text-align: center; color: white">
                            <span style="font-size: 48px">🎯</span>
                            <h3 style="margin: 16px 0 8px">Step 1 of 4</h3>
                            <p style="margin: 0; opacity: 0.9">
                                Getting started with the basics
                            </p>
                        </div>
                    </div>
                </div>
                <div
                    style="
                        display: flex;
                        justify-content: space-between;
                        margin-top: 16px;
                    "
                >
                    <button
                        style="
                            padding: 10px 24px;
                            background: var(--color_fill_secondary);
                            border: none;
                            border-radius: 6px;
                            cursor: pointer;
                        "
                    >
                        Previous
                    </button>
                    <button
                        style="
                            padding: 10px 24px;
                            background: var(--color_fill_primary);
                            color: white;
                            border: none;
                            border-radius: 6px;
                            cursor: pointer;
                        "
                    >
                        Next Step
                    </button>
                </div>
            </div>

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