Gallery

Image gallery built with photoswipe.

White kayak on lake near green trees during daytime

Person riding on boat paddle during sunset

Installation

The gallery component is built using the photoswipe library.

Install npm install photoswipe and add the following style import and colors to your CSS file.

/*  styles.css */
@import "photoswipe/photoswipe.css" layer(components);

@theme inline {
  --color-gallery: var(--gallery);
  --color-gallery-foreground: var(--gallery-foreground);
}

:root {
  --gallery: oklch(0.439 0 0);
  --gallery-foreground: oklch(1 0 0);
}

:root.dark {
  --gallery: oklch(0.439 0 0);
  --gallery-foreground: oklch(1 0 0);
}

Gallery and Carousel Preview

Open in

Gallery in combination with spartan/ui carousel component.

Gallery Caption

Open in

Use elb-gallery-caption to add captions to each image in the gallery component.