An interactive image slideshow where hovering staggered text indicators reveals the matching slide with an animated clip-path transition.
"use client";
import {
Slideshow,
SlideshowImageContainer,
SlideshowImageWrap,
SlideshowIndicator,
} from "@/components/ui/slideshow";
import Image from "next/image";
const slides = [
{
id: "slide-6",
title: "UI UX design",
imageUrl:
"https://cdn.21st.dev/assets/mirror/e5/e53e3c7473052546682df15ee99f20ccf6b5413039fc6cafa1b23717237091d0.jpg",
},
{
id: "slide-1",
title: "frontend dev",
imageUrl:
"https://cdn.21st.dev/assets/mirror/8c/8c0f960426250d158fbd13dcb4c244268f0847b8b3f2ae7788a62b9bcf6b7b02.jpg",
},
{
id: "slide-2",
title: "backend dev",
imageUrl:
"https://cdn.21st.dev/assets/mirror/93/9309cec6a1caedbe56f26432bc56830785f7f06089f66190cfebcbe65e92789b.jpg",
},
{
id: "slide-3",
title: "video editing",
imageUrl:
"https://cdn.21st.dev/assets/mirror/48/4875e9daf51a4045c9f1e1f3e58885d32b7f28e04a5c1471c86c135f0b1c8cd2.jpg",
},
{
id: "slide-4",
title: "SEO optimization",
imageUrl:
"https://cdn.21st.dev/assets/mirror/64/64d1fa5c32ed1dc0c2ee577155618270fdff26e47f63c2fb4bc68c127d66d669.jpg",
},
];
export default function SlideshowDemo() {
return (
<Slideshow className="min-h-svh place-content-center p-6 md:px-12">
<h3 className="mb-6 text-primary text-xs font-medium capitalize tracking-wide">
/ our services
</h3>
<div className="flex flex-wrap items-center justify-evenly gap-6 md:gap-12">
<div className="flex flex-col space-y-2 md:space-y-4 ">
{slides.map((slide, index) => (
<SlideshowIndicator
key={slide.title}
index={index}
className="cursor-pointer text-4xl font-bold uppercase tracking-tighter"
>
{slide.title}
</SlideshowIndicator>
))}
</div>
<SlideshowImageContainer className="relative h-96 aspect-[9/14]">
{slides.map((slide, index) => (
<SlideshowImageWrap key={index} index={index} className="relative">
<Image
src={slide.imageUrl}
alt={slide.title}
fill
priority={true}
sizes="(max-width: 768px) 100vw, 50vw"
className="size-full object-cover"
/>
</SlideshowImageWrap>
))}
</SlideshowImageContainer>
</div>
</Slideshow>
);
}
Part of Systaliko UI — browse the full library on 21st.dev.