@vietsch/svelte-video-gallery

@vietsch/svelte-video-gallery

Reusable, themeable video gallery for Svelte with thumbnails, bullets, fullscreen, swipe and crossfade transitions.

Current version: 0.1.2

Install

pnpm add @vietsch/svelte-video-gallery
# or
npm i @vietsch/svelte-video-gallery

Usage

<script>
  import { VideoGallery } from '@vietsch/svelte-video-gallery';
  const videos = [
    { title: 'Video 1', description: 'First', poster: '/a.jpg', source: '/a.mp4' },
    { title: 'Video 2', description: 'Second', poster: '/b.jpg', source: '/b.mp4' }
  ];
</script>

<VideoGallery 
  {videos}
  thumbnailPosition="bottom"
  thumbnailVariant="scroll"
  timeDisplay={false}
  showBullets={true}
  showFullscreenButton={true}
/>

Props

• videos: Array<{ poster: string; source: string; title?: string; description?: string }>
• thumbnailPosition: 'top' | 'bottom' | 'left' | 'right'
• thumbnailVariant: 'scroll' | 'flex'
• timeDisplay: boolean
• showBullets: boolean
• showFullscreenButton: boolean

Theming

Override CSS vars in your app:

• --action, --foreground, --background, --border-radius
• Component classes use the prefix svgvg- (e.g. svgvg-bullet, svgvg-icon)