Svelte Gallery

A lightweight gallery component for use in Svelte and SvelteKit projects.

Install the package

npm i --save-dev @accuser/svelte-gallery

Examples

<script lang="ts">
	import { Gallery } from '@accuser/svelte-gallery';

	const items = [
		{
			alt: 'photo frames inside building',
			src: 'https://images.unsplash.com/photo-1507643179773-3e975d7ac515?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1280&h=720&q=80',
			caption: 'A photography exhibit, indoors (obviously).'
		},
		{
			alt: 'The ArtScience Museum from the bay in Singapore',
			src: 'https://images.unsplash.com/photo-1655742043955-96ddc29cdfd9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1280&h=720&q=80',
			caption: 'The ArtScience Museum from the bay in Singapore'
		},
		{
			alt: 'The Old man of Storr',
			src: 'https://images.unsplash.com/photo-1506368670575-2ecb8dd6d86e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1280&h=720&q=80',
			caption:
				'It took one day for our company consisting of 6 (tough?) guys to walk from Portree to the Old man of Storr. Our boots where completely soaked. There’s not such a thing like ‘hiking paths’ in Skye. The day after, 4 of the 6 guys went up the hill to see the amazing rock formation!'
		}
	];
</script>

<div class="mx-auto flex max-w-screen-md flex-col justify-center">
	<Gallery {items} />
</div>