Slideshows
Image and content slideshows with navigation controls.
Basic Slideshow
HTML
<div
class="slideshow"
style="
position: relative;
width: 100%;
max-width: 600px;
aspect-ratio: 16/9;
overflow: hidden;
border-radius: 12px;
"
>
<div
class="slideshow--slides"
style="display: flex; transition: transform 0.5s ease"
>
<div
class="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="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="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
class="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);
border-radius: 50%;
cursor: pointer;
font-size: 18px;
"
>
←
</button>
<button
class="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);
border-radius: 50%;
cursor: pointer;
font-size: 18px;
"
>
→
</button>
</div>Slideshow with Indicators
HTML
<div
class="slideshow"
style="
position: relative;
width: 100%;
max-width: 600px;
aspect-ratio: 16/9;
overflow: hidden;
border-radius: 12px;
"
>
<div class="slideshow--slides">
<div
class="slideshow--slide active"
style="
width: 100%;
height: 100%;
background: linear-gradient(135deg, #43e97b, #38f9d7);
"
></div>
</div>
<div
class="slideshow--indicators"
style="
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
"
>
<button
class="slideshow--indicator active"
style="
width: 12px;
height: 12px;
border: none;
background: white;
border-radius: 50%;
cursor: pointer;
opacity: 1;
"
></button>
<button
class="slideshow--indicator"
style="
width: 12px;
height: 12px;
border: none;
background: white;
border-radius: 50%;
cursor: pointer;
opacity: 0.5;
"
></button>
<button
class="slideshow--indicator"
style="
width: 12px;
height: 12px;
border: none;
background: white;
border-radius: 50%;
cursor: pointer;
opacity: 0.5;
"
></button>
<button
class="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="slideshow"
style="
position: relative;
width: 100%;
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, #fa709a, #fee140);
"
>
<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">
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="slideshow--counter"
style="
position: absolute;
top: 16px;
right: 16px;
padding: 6px 12px;
background: rgba(0, 0, 0, 0.5);
border-radius: 20px;
color: white;
font-size: 13px;
"
>
1 / 5
</div>
</div>Slideshow with Thumbnails
HTML
<div class="slideshow-container" style="max-width: 600px">
<div
class="slideshow--main"
style="
width: 100%;
aspect-ratio: 16/9;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 12px;
margin-bottom: 12px;
"
></div>
<div
class="slideshow--thumbnails"
style="display: flex; gap: 8px; overflow-x: auto"
>
<div
class="slideshow--thumb active"
style="
flex-shrink: 0;
width: 80px;
height: 60px;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 6px;
cursor: pointer;
border: 3px solid var(--color_fill_primary);
"
></div>
<div
class="slideshow--thumb"
style="
flex-shrink: 0;
width: 80px;
height: 60px;
background: linear-gradient(135deg, #f093fb, #f5576c);
border-radius: 6px;
cursor: pointer;
opacity: 0.7;
"
></div>
<div
class="slideshow--thumb"
style="
flex-shrink: 0;
width: 80px;
height: 60px;
background: linear-gradient(135deg, #4facfe, #00f2fe);
border-radius: 6px;
cursor: pointer;
opacity: 0.7;
"
></div>
<div
class="slideshow--thumb"
style="
flex-shrink: 0;
width: 80px;
height: 60px;
background: linear-gradient(135deg, #43e97b, #38f9d7);
border-radius: 6px;
cursor: pointer;
opacity: 0.7;
"
></div>
<div
class="slideshow--thumb"
style="
flex-shrink: 0;
width: 80px;
height: 60px;
background: linear-gradient(135deg, #fa709a, #fee140);
border-radius: 6px;
cursor: pointer;
opacity: 0.7;
"
></div>
</div>
</div>Fade Transition Slideshow
HTML
<div
class="slideshow slideshow--fade"
style="
position: relative;
width: 100%;
max-width: 600px;
aspect-ratio: 16/9;
border-radius: 12px;
overflow: hidden;
"
>
<div
class="slideshow--slide"
style="
position: absolute;
inset: 0;
background: linear-gradient(135deg, #a8edea, #fed6e3);
opacity: 1;
transition: opacity 0.5s;
"
></div>
<div
class="slideshow--slide"
style="
position: absolute;
inset: 0;
background: linear-gradient(135deg, #d299c2, #fef9d7);
opacity: 0;
transition: opacity 0.5s;
"
></div>
<div
class="slideshow--slide"
style="
position: absolute;
inset: 0;
background: linear-gradient(135deg, #89f7fe, #66a6ff);
opacity: 0;
transition: opacity 0.5s;
"
></div>
<div
class="slideshow--controls"
style="
position: absolute;
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);
border-radius: 6px;
cursor: pointer;
"
>
Previous
</button>
<button
style="
padding: 8px 16px;
border: none;
background: rgba(255, 255, 255, 0.9);
border-radius: 6px;
cursor: pointer;
"
>
Next
</button>
</div>
</div>