'use client'
import { ImagePlayer } from "@/components/ui/image-player";
import Image from 'next/image';
const IMAGES = [
'https://cdn.21st.dev/assets/mirror/e7/e7b015e46ffb9c1eedc33dc96aed89153f0b51dab58d99f4496fb14fc8ebe61c.jpg',
'https://cdn.21st.dev/assets/mirror/4a/4a205b8a966ed612c8ab5a035843f7ecdf45f7becfe678d2ebd480a06e7a1fde.jpg',
'https://cdn.21st.dev/assets/mirror/6d/6d5d6222fd6988a0360ddc2294c46a7fe9248eada9299bb035667c963f9a08b9.jpg',
'https://cdn.21st.dev/assets/mirror/fc/fcb00c084011c54dca7a9b686e78f595060aa33f46f0bd3aa259b51fbd365026.jpg',
];
export default function DemoOne() {
return (<div className="h-screen p-12 flex items-center justify-center">
<ImagePlayer
images={IMAGES}
interval={200}
renderImage={(src) => (
<Image
src={src}
width={400}
height={300}
className="size-full h-auto max-h-full max-w-xl object-cover inline-block align-middle"
alt="showcalse"
/>
)}
/>
</div>)
}
Part of Systaliko UI ā browse the full library on 21st.dev.