Image Player

Galleries 174

About

- 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

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Image Player to your project and fits it to your theme.

Code

How Image Player is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'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>)
}