Slideshow
Image and content slideshow components with navigation and indicators.
Basic Slideshow
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
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
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
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
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>