Svelte Image Gallery

Uvacoder
1

svelte-image-gallery

A Masonry-Like Image Container for Svelte

Traditional	svelte-image-gallery
![traditional][ss1]	![svelte-image-gallery][ss2]
Made responsive via media queries or [minmax/autofit][minmax]	Responsive out of the box

Installation

npm install --save-dev svelte-image-gallery

Usage

<script>
    import Gallery from 'svelte-image-gallery'

    function handleClick(e) {
        console.log(e.detail.url)
    }
</script>

<Gallery on:click={handleClick}>
    <img src="..." />
    <img src="..." />
    ...
</Gallery>

Running Locally

Clone the repository
Open example folder in terminal
Run npm i, then npm run dev

Parameters

Parameter	Default	Description	Unit
gap	10	Grid Gap Between Items	px
maxColumnWidth	250	Maximum Column Width	px

To access the image url on click, use the on:click directive in the Gallery component.

Created By Berkin AKKAYA

Top categories