Components
Loading preview...
- Image player component, flexible to use takes array of images urls and interval, also you can use any html image tag '<img />' (by default) or '<picture>' or use next 'Image' this on is very recommended (check the demo) as next optimized images makes load fast. š Docs: https://systaliko-ui.vercel.app/docs/blocks/image-player
@YoucefBnm
npx shadcn@latest add https://21st.dev/r/youcefbnm/image-player'use client'
import { ImagePlayer } from "@/components/ui/image-player";
import Image from 'next/image';
const IMAGES = [
'https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?q=80&w=1494&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
'https://images.unsplash.com/photo-1617869763329-8e8160d32adb?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
'https://images.unsplash.com/photo-1705675742522-b0bdc228f2ed?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
'https://images.unsplash.com/photo-1705615791178-d32cc2cdcd9c?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
];
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>)
}