Carousel
Carousel components for cycling through elements like a slideshow.
Basic Carousel
HTML
<div
style="
position: relative;
width: 100%;
max-width: 600px;
overflow: hidden;
border-radius: var(--ss-radius-lg);
"
>
<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
HTML
<div
style="
position: relative;
width: 100%;
max-width: 600px;
border-radius: var(--ss-radius-lg);
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
aria-label="Previous slide"
style="
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
color: #111111;
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
aria-label="Next slide"
style="
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
color: #111111;
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
HTML
<div
style="
position: relative;
width: 100%;
max-width: 600px;
border-radius: var(--ss-radius-lg);
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: var(--ss-radius-sm);
background: white;
"
></span>
<span
style="
width: 12px;
height: 4px;
border-radius: var(--ss-radius-sm);
background: rgba(255, 255, 255, 0.5);
"
></span>
<span
style="
width: 12px;
height: 4px;
border-radius: var(--ss-radius-sm);
background: rgba(255, 255, 255, 0.5);
"
></span>
<span
style="
width: 12px;
height: 4px;
border-radius: var(--ss-radius-sm);
background: rgba(255, 255, 255, 0.5);
"
></span>
</div>
</div>Card Carousel
HTML
<div
style="
position: relative;
width: 100%;
overflow: hidden;
padding: 20px 0;
"
>
<div
tabindex="0"
role="region"
aria-label="Card carousel"
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: var(--ss-color-surface);
color: var(--ss-color-text);
border-radius: var(--ss-radius-lg);
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">
<h3 style="margin: 0 0 8px">Card 1</h3>
<p style="margin: 0; font-size: 14px; color: var(--ss-color-text-muted)">
Description text
</p>
</div>
</div>
<div
style="
min-width: 200px;
scroll-snap-align: start;
background: var(--ss-color-surface);
color: var(--ss-color-text);
border-radius: var(--ss-radius-lg);
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">
<h3 style="margin: 0 0 8px">Card 2</h3>
<p style="margin: 0; font-size: 14px; color: var(--ss-color-text-muted)">
Description text
</p>
</div>
</div>
<div
style="
min-width: 200px;
scroll-snap-align: start;
background: var(--ss-color-surface);
color: var(--ss-color-text);
border-radius: var(--ss-radius-lg);
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">
<h3 style="margin: 0 0 8px">Card 3</h3>
<p style="margin: 0; font-size: 14px; color: var(--ss-color-text-muted)">
Description text
</p>
</div>
</div>
<div
style="
min-width: 200px;
scroll-snap-align: start;
background: var(--ss-color-surface);
color: var(--ss-color-text);
border-radius: var(--ss-radius-lg);
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">
<h3 style="margin: 0 0 8px">Card 4</h3>
<p style="margin: 0; font-size: 14px; color: var(--ss-color-text-muted)">
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="ss-c-carousel ss-c-carousel-slider">
<div class="ss-c-carousel-fixed-item">
<button class="ss-c-button">Fixed CTA</button>
</div>
<div class="ss-c-carousel-item active" id="carousel-slide-1">
<img src="/img/placeholder/1200x600-demo1.svg" alt="Slide 1" />
<div class="ss-c-carousel-caption">
<h3>Slide One</h3>
<p>This is the first slide.</p>
</div>
</div>
<div class="ss-c-carousel-item" id="carousel-slide-2">
<img src="/img/placeholder/1200x600-demo2.svg" alt="Slide 2" />
<div class="ss-c-carousel-caption">
<h3>Slide Two</h3>
<p>This is the second slide.</p>
</div>
</div>
<div class="ss-c-carousel-item" id="carousel-slide-3">
<img src="/img/placeholder/1200x600-demo3.svg" alt="Slide 3" />
<div class="ss-c-carousel-caption">
<h3>Slide Three</h3>
<p>This is the third slide.</p>
</div>
</div>
<div class="ss-c-indicators">
<span
class="ss-c-indicator-item active"
data-target="#carousel-slide-1"
></span>
<span
class="ss-c-indicator-item"
data-target="#carousel-slide-2"
></span>
<span
class="ss-c-indicator-item"
data-target="#carousel-slide-3"
></span>
</div>
</div>Carousel
Image and content slideshow components with navigation and indicators.
Basic Slideshow
HTML
<div
class="ss-c-slideshow"
style="
position: relative;
max-width: 600px;
aspect-ratio: 16/9;
overflow: hidden;
border-radius: var(--ss-radius-lg);
"
>
<div class="ss-c-slideshow__slides" style="display: flex; height: 100%">
<div
class="ss-c-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
aria-label="Previous slide"
class="ss-c-slideshow__prev"
style="
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
background: rgba(255, 255, 255, 0.9);
color: #111111;
border: none;
border-radius: 50%;
cursor: pointer;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
"
>
←
</button>
<button
aria-label="Next slide"
class="ss-c-slideshow__next"
style="
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
background: rgba(255, 255, 255, 0.9);
color: #111111;
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="ss-c-slideshow"
style="
position: relative;
max-width: 600px;
aspect-ratio: 16/9;
overflow: hidden;
border-radius: var(--ss-radius-lg);
"
>
<div class="ss-c-slideshow__slides" style="height: 100%">
<div
class="ss-c-slideshow__slide active"
style="
width: 100%;
height: 100%;
background: linear-gradient(
135deg,
#f093fb 0%,
#f5576c 100%
);
"
></div>
</div>
<div
class="ss-c-slideshow__indicators"
style="
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 14px;
"
>
<button
aria-label="Go to slide 1"
aria-current="true"
class="ss-c-slideshow__dot active"
style="
width: 12px;
height: 12px;
background: white;
border: none;
border-radius: 50%;
cursor: pointer;
opacity: 1;
"
></button>
<button
aria-label="Go to slide 2"
class="ss-c-slideshow__dot"
style="
width: 12px;
height: 12px;
background: white;
border: none;
border-radius: 50%;
cursor: pointer;
opacity: 0.5;
"
></button>
<button
aria-label="Go to slide 3"
class="ss-c-slideshow__dot"
style="
width: 12px;
height: 12px;
background: white;
border: none;
border-radius: 50%;
cursor: pointer;
opacity: 0.5;
"
></button>
<button
aria-label="Go to slide 4"
class="ss-c-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
HTML
<div
class="ss-c-slideshow"
style="
position: relative;
max-width: 600px;
aspect-ratio: 16/9;
overflow: hidden;
border-radius: var(--ss-radius-lg);
"
>
<div
class="ss-c-slideshow__slide"
style="
width: 100%;
height: 100%;
background: linear-gradient(
135deg,
#4facfe 0%,
#00f2fe 100%
);
"
>
<div
class="ss-c-slideshow__caption"
style="
position: absolute;
bottom: 0;
left: 0;
right: 0;
transform: none;
padding: 40px 24px 24px;
background: linear-gradient(
rgba(0, 0, 0, 0.25),
rgba(0, 0, 0, 0.8)
);
color: white;
"
>
<h3 style="margin: 0 0 8px; font-size: 20px; color: inherit">
Amazing Landscape
</h3>
<p style="margin: 0; opacity: 0.9; font-size: 14px">
Discover the beauty of nature
</p>
</div>
</div>
<button
aria-label="Previous slide"
class="ss-c-slideshow__prev"
style="
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(4px);
border: none;
border-radius: 50%;
cursor: pointer;
color: white;
font-size: 16px;
"
>
←
</button>
<button
aria-label="Next slide"
class="ss-c-slideshow__next"
style="
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(4px);
border: none;
border-radius: 50%;
cursor: pointer;
color: white;
font-size: 16px;
"
>
→
</button>
</div>Thumbnail Navigation
HTML
<div
class="ss-c-slideshow ss-c-slideshow--thumbnails"
style="display: block; max-width: 600px; margin-top: 0; overflow: visible"
>
<div
style="
position: relative;
aspect-ratio: 16/9;
overflow: hidden;
border-radius: var(--ss-radius-lg);
margin-bottom: 12px;
"
>
<div
class="ss-c-slideshow__slide"
style="
width: 100%;
height: 100%;
background: linear-gradient(
135deg,
#43e97b 0%,
#38f9d7 100%
);
"
></div>
</div>
<div class="ss-c-slideshow__thumbs" style="display: flex; gap: 8px">
<button
aria-label="Show slide 1"
aria-current="true"
class="ss-c-slideshow__thumb active"
style="
flex: 1;
aspect-ratio: 16/9;
background: linear-gradient(
135deg,
#43e97b 0%,
#38f9d7 100%
);
border: 3px solid var(--ss-color-accent);
border-radius: var(--ss-radius-md);
cursor: pointer;
"
></button>
<button
aria-label="Show slide 2"
class="ss-c-slideshow__thumb"
style="
flex: 1;
aspect-ratio: 16/9;
background: linear-gradient(
135deg,
#fa709a 0%,
#fee140 100%
);
border: 3px solid transparent;
border-radius: var(--ss-radius-md);
cursor: pointer;
opacity: 0.7;
"
></button>
<button
aria-label="Show slide 3"
class="ss-c-slideshow__thumb"
style="
flex: 1;
aspect-ratio: 16/9;
background: linear-gradient(
135deg,
#667eea 0%,
#764ba2 100%
);
border: 3px solid transparent;
border-radius: var(--ss-radius-md);
cursor: pointer;
opacity: 0.7;
"
></button>
<button
aria-label="Show slide 4"
class="ss-c-slideshow__thumb"
style="
flex: 1;
aspect-ratio: 16/9;
background: linear-gradient(
135deg,
#f093fb 0%,
#f5576c 100%
);
border: 3px solid transparent;
border-radius: var(--ss-radius-md);
cursor: pointer;
opacity: 0.7;
"
></button>
</div>
</div>Fullscreen Style Slideshow
HTML
<div
class="ss-c-slideshow ss-c-slideshow--fullscreen"
style="
position: relative;
max-width: 700px;
aspect-ratio: 16/9;
overflow: hidden;
border-radius: var(--ss-radius-lg);
background: #000;
"
>
<div
class="ss-c-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">
<h3
style="
margin: 0 0 16px;
font-size: 36px;
font-weight: 300;
color: inherit;
"
>
Welcome
</h3>
<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: var(--ss-radius-3xl);
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
aria-label="Previous slide"
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
aria-label="Next slide"
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
HTML
<div
class="ss-c-slideshow ss-c-slideshow--cards"
style="display: block; padding: 20px 0"
>
<div
tabindex="0"
role="region"
aria-label="Card slideshow"
style="
display: flex;
gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding: 0 16px;
"
>
<div
class="ss-c-slideshow__card"
style="
display: block;
min-width: 280px;
scroll-snap-align: start;
background: var(--ss-color-surface);
color: var(--ss-color-text);
border-radius: var(--ss-radius-lg);
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">
<h3 style="margin: 0 0 8px">Card Title</h3>
<p style="margin: 0; font-size: 14px; color: var(--ss-color-text-muted)">
Short description text
</p>
</div>
</div>
<div
class="ss-c-slideshow__card"
style="
display: block;
min-width: 280px;
scroll-snap-align: start;
background: var(--ss-color-surface);
color: var(--ss-color-text);
border-radius: var(--ss-radius-lg);
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">
<h3 style="margin: 0 0 8px">Another Card</h3>
<p style="margin: 0; font-size: 14px; color: var(--ss-color-text-muted)">
Description here
</p>
</div>
</div>
<div
class="ss-c-slideshow__card"
style="
display: block;
min-width: 280px;
scroll-snap-align: start;
background: var(--ss-color-surface);
color: var(--ss-color-text);
border-radius: var(--ss-radius-lg);
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">
<h3 style="margin: 0 0 8px">Third Card</h3>
<p style="margin: 0; font-size: 14px; color: var(--ss-color-text-muted)">
More content
</p>
</div>
</div>
</div>
</div>Slideshow with Progress
HTML
<div
class="ss-c-slideshow ss-c-slideshow--progress"
style="
position: relative;
width: 100%;
height: auto;
max-width: 600px;
background: none;
"
>
<div
class="ss-c-slideshow__progress"
style="
position: static;
display: flex;
gap: 4px;
height: auto;
margin-bottom: 12px;
background: none;
"
>
<div
style="
flex: 1;
height: 3px;
background: var(--ss-color-accent);
border-radius: var(--ss-radius-sm);
"
></div>
<div
style="
flex: 1;
height: 3px;
background: var(--ss-color-border);
border-radius: var(--ss-radius-sm);
"
></div>
<div
style="
flex: 1;
height: 3px;
background: var(--ss-color-border);
border-radius: var(--ss-radius-sm);
"
></div>
<div
style="
flex: 1;
height: 3px;
background: var(--ss-color-border);
border-radius: var(--ss-radius-sm);
"
></div>
</div>
<div
style="
position: relative;
aspect-ratio: 16/9;
overflow: hidden;
border-radius: var(--ss-radius-lg);
"
>
<div
class="ss-c-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: #1a1a1a">
<span style="font-size: 48px" aria-hidden="true">◎</span>
<h3 style="margin: 16px 0 8px; color: inherit">Step 1 of 4</h3>
<p style="margin: 0">
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(--ss-color-surface-muted);
color: var(--ss-color-text);
border: none;
border-radius: var(--ss-radius-md);
cursor: pointer;
"
>
Previous
</button>
<button
style="
padding: 10px 24px;
background: var(--ss-color-accent);
color: var(--ss-color-on-accent);
border: none;
border-radius: var(--ss-radius-md);
cursor: pointer;
"
>
Next Step
</button>
</div>
</div>Carousel
Image and content slideshows with navigation controls.
Basic Slideshow
HTML
<div
class="ss-c-slideshow"
style="
position: relative;
width: 100%;
max-width: 600px;
aspect-ratio: 16/9;
overflow: hidden;
border-radius: var(--ss-radius-lg);
"
>
<div
class="ss-c-slideshow--slides"
style="display: flex; height: 100%; transition: transform 0.5s ease"
>
<div
class="ss-c-slideshow--slide"
style="
min-width: 100%;
height: 100%;
background: linear-gradient(135deg, #667eea, #764ba2);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
"
>
Slide 1
</div>
<div
class="ss-c-slideshow--slide"
style="
min-width: 100%;
height: 100%;
background: linear-gradient(135deg, #f093fb, #f5576c);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
"
>
Slide 2
</div>
<div
class="ss-c-slideshow--slide"
style="
min-width: 100%;
height: 100%;
background: linear-gradient(135deg, #4facfe, #00f2fe);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
"
>
Slide 3
</div>
</div>
<button
aria-label="Previous slide"
class="ss-c-slideshow--prev"
style="
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border: none;
background: rgba(255, 255, 255, 0.9);
color: #111111;
border-radius: 50%;
cursor: pointer;
font-size: 18px;
"
>
←
</button>
<button
aria-label="Next slide"
class="ss-c-slideshow--next"
style="
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border: none;
background: rgba(255, 255, 255, 0.9);
color: #111111;
border-radius: 50%;
cursor: pointer;
font-size: 18px;
"
>
→
</button>
</div>Slideshow with Indicators
HTML
<div
class="ss-c-slideshow"
style="
position: relative;
width: 100%;
max-width: 600px;
aspect-ratio: 16/9;
overflow: hidden;
border-radius: var(--ss-radius-lg);
"
>
<div class="ss-c-slideshow--slides" style="height: 100%">
<div
class="ss-c-slideshow--slide active"
style="
width: 100%;
height: 100%;
background: linear-gradient(135deg, #43e97b, #38f9d7);
"
></div>
</div>
<div
class="ss-c-slideshow--indicators"
style="
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 14px;
"
>
<button
aria-label="Go to slide 1"
aria-current="true"
class="ss-c-slideshow--indicator active"
style="
width: 12px;
height: 12px;
border: none;
background: white;
border-radius: 50%;
cursor: pointer;
opacity: 1;
"
></button>
<button
aria-label="Go to slide 2"
class="ss-c-slideshow--indicator"
style="
width: 12px;
height: 12px;
border: none;
background: white;
border-radius: 50%;
cursor: pointer;
opacity: 0.5;
"
></button>
<button
aria-label="Go to slide 3"
class="ss-c-slideshow--indicator"
style="
width: 12px;
height: 12px;
border: none;
background: white;
border-radius: 50%;
cursor: pointer;
opacity: 0.5;
"
></button>
<button
aria-label="Go to slide 4"
class="ss-c-slideshow--indicator"
style="
width: 12px;
height: 12px;
border: none;
background: white;
border-radius: 50%;
cursor: pointer;
opacity: 0.5;
"
></button>
</div>
</div>Slideshow with Captions
HTML
<div
class="ss-c-slideshow"
style="
position: relative;
width: 100%;
max-width: 600px;
aspect-ratio: 16/9;
overflow: hidden;
border-radius: var(--ss-radius-lg);
"
>
<div
class="ss-c-slideshow--slide"
style="
width: 100%;
height: 100%;
background: linear-gradient(135deg, #fa709a, #fee140);
"
>
<div
class="ss-c-slideshow--caption"
style="
position: absolute;
bottom: 0;
left: 0;
right: 0;
transform: none;
padding: 40px 24px 24px;
background: linear-gradient(
rgba(0, 0, 0, 0.25),
rgba(0, 0, 0, 0.8)
);
color: white;
"
>
<h3 style="margin: 0 0 8px; font-size: 20px; color: inherit">
Beautiful Sunset
</h3>
<p style="margin: 0; opacity: 0.9; font-size: 14px">
A stunning view captured at golden hour with vibrant
colors filling the sky.
</p>
</div>
</div>
<div
class="ss-c-slideshow--counter"
style="
position: absolute;
top: 16px;
right: 16px;
left: auto;
padding: 6px 12px;
background: rgba(0, 0, 0, 0.5);
border-radius: var(--ss-radius-2xl);
color: white;
font-size: 13px;
"
>
1 / 5
</div>
</div>Slideshow with Thumbnails
HTML
<div class="ss-c-slideshow-container" style="max-width: 600px">
<div
class="ss-c-slideshow--main"
style="
width: 100%;
aspect-ratio: 16/9;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: var(--ss-radius-lg);
margin-bottom: 12px;
"
></div>
<div
class="ss-c-slideshow--thumbnails"
tabindex="0"
role="region"
aria-label="Slide thumbnails"
style="display: flex; gap: 8px; overflow-x: auto"
>
<div
class="ss-c-slideshow--thumb active"
style="
flex-shrink: 0;
width: 80px;
height: 60px;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: var(--ss-radius-md);
cursor: pointer;
border: 3px solid var(--ss-color-accent);
"
></div>
<div
class="ss-c-slideshow--thumb"
style="
flex-shrink: 0;
width: 80px;
height: 60px;
background: linear-gradient(135deg, #f093fb, #f5576c);
border-radius: var(--ss-radius-md);
cursor: pointer;
opacity: 0.7;
"
></div>
<div
class="ss-c-slideshow--thumb"
style="
flex-shrink: 0;
width: 80px;
height: 60px;
background: linear-gradient(135deg, #4facfe, #00f2fe);
border-radius: var(--ss-radius-md);
cursor: pointer;
opacity: 0.7;
"
></div>
<div
class="ss-c-slideshow--thumb"
style="
flex-shrink: 0;
width: 80px;
height: 60px;
background: linear-gradient(135deg, #43e97b, #38f9d7);
border-radius: var(--ss-radius-md);
cursor: pointer;
opacity: 0.7;
"
></div>
<div
class="ss-c-slideshow--thumb"
style="
flex-shrink: 0;
width: 80px;
height: 60px;
background: linear-gradient(135deg, #fa709a, #fee140);
border-radius: var(--ss-radius-md);
cursor: pointer;
opacity: 0.7;
"
></div>
</div>
</div>Fade Transition Slideshow
HTML
<div
class="ss-c-slideshow ss-c-slideshow--fade"
style="
position: relative;
width: 100%;
max-width: 600px;
aspect-ratio: 16/9;
border-radius: var(--ss-radius-lg);
overflow: hidden;
"
>
<div
class="ss-c-slideshow--slide"
style="
position: absolute;
inset: 0;
background: linear-gradient(135deg, #a8edea, #fed6e3);
opacity: 1;
transition: opacity 0.5s;
"
></div>
<div
class="ss-c-slideshow--slide"
style="
position: absolute;
inset: 0;
background: linear-gradient(135deg, #d299c2, #fef9d7);
opacity: 0;
transition: opacity 0.5s;
"
></div>
<div
class="ss-c-slideshow--slide"
style="
position: absolute;
inset: 0;
background: linear-gradient(135deg, #89f7fe, #66a6ff);
opacity: 0;
transition: opacity 0.5s;
"
></div>
<div
class="ss-c-slideshow--controls"
style="
position: absolute;
top: auto;
right: auto;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
"
>
<button
style="
padding: 8px 16px;
border: none;
background: rgba(255, 255, 255, 0.9);
color: #111111;
border-radius: var(--ss-radius-md);
cursor: pointer;
"
>
Previous
</button>
<button
style="
padding: 8px 16px;
border: none;
background: rgba(255, 255, 255, 0.9);
color: #111111;
border-radius: var(--ss-radius-md);
cursor: pointer;
"
>
Next
</button>
</div>
</div>