Previous Single Image Next Carousel

Image Gallery

Grid-based image gallery with lightbox and masonry options.

This page is a scaffold for the Image Gallery component. Build the live markup, Alpine.js interactions, and DaisyUI/Tailwind classes here, then replace this placeholder block with the real preview + code snippet.

Planned variants & states to implement:

  • Grid gallery
  • Masonry gallery
  • Lightbox on click
  • Filter by category
  • Load more button
  • Select / download mode
  • Drag to reorder (admin)
11

Single Image

Responsive image with aspect ratio, caption, and lazy loading.

Carousel

Auto-play and manual image/content carousel with indicators.

Slider

Content slider with navigation arrows and swipe support.

Video

Embedded video player with poster, controls, and aspect ratio.

Video Popup

Thumbnail with play button that opens video in a modal.

Before After

Drag-handle image comparison slider.

Logo Cloud

Static grid of partner or client logos.

Logo Carousel

Auto-scrolling marquee of logos.

Icon Showcase

Browsable icon grid with copy-to-clipboard support.

Icon Picker

Searchable icon selector input component.

Map Embed

Embedded Google Maps or OpenStreetMap with marker and controls.
Previous Single Image Next Carousel