Svelte Image Gallery screenshot

Svelte Image Gallery

Author Avatar Theme by Berkinakkaya
Updated: 16 Aug 2024
59 Stars

A Masonry-Like Image Container for Svelte

Overview

svelte-image-gallery is a Masonry-Like Image Container designed specifically for the Svelte framework. It provides a responsive image gallery out of the box and allows customization through various parameters.

Features

  • Responsive out of the box: The image gallery is automatically responsive, adapting to different screen sizes and resolutions.
  • Customizable grid gap: Users can specify the grid gap between items in the gallery using the gap parameter.
  • Maximum column width: The maxColumnWidth parameter can be used to set the maximum width for each column in the gallery.
  • Enlarge image on hover: By setting the hover parameter to true, users can enable image enlargement when hovering over them.
  • Flexible image loading: Users can control the image loading behavior using the loading parameter, which supports different loading types.

Installation

To install svelte-image-gallery, you can follow these steps:

  1. Clone the repository.
  2. Open the example folder in the terminal.
  3. Run npm i to install dependencies.
  4. Run npm run dev to start the development server.

Summary

svelte-image-gallery is a versatile component for creating Masonry-Like image containers in Svelte. It offers responsiveness out of the box, customizable parameters, and easy installation. With this component, users can quickly create dynamic and visually appealing image galleries for their Svelte applications.