Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/martan03/react-imagallery
https://github.com/martan03/react-imagallery
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/martan03/react-imagallery
- Owner: Martan03
- License: gpl-3.0
- Created: 2024-10-11T20:26:37.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2024-11-07T21:38:09.000Z (2 months ago)
- Last Synced: 2024-11-07T22:30:25.701Z (2 months ago)
- Language: TypeScript
- Size: 2.44 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-imagallery
React Imagallery is react component for displaying image gallery.
![imagallery](assets/imagallery.jpg)
## Table of Contents
- [Getting started](#getting-started)
- [Installation](#installation)
- [Example](#example)
- [Features](#features)
- [Props](#props)
- [Links](#links)## Getting started
### Installation
Imagallery can be installed using npm (with React 16.0.0 or later):
```bash
npm i react-imagallery
```### Example
You can see basic example of displaying images
[here](https://github.com/Martan03/react-imagallery/tree/master/example).## Features
- Fullscreen support
- Thumbnail navigation
- Swipe & drag gestures
- Slideshow support
- Responsive design
- Customization## Props
- `items`: (ImgGalleryItem[], required)
- `original`: *(string, required)*: image source URL
- `thumbnail`: *(string, required)*: image thumbnail source URL
- `originalAlt`: *(string)*: image alt
- `thumbnailAlt`: *(string)*: image thumbnail alt
- `selected`: *(number)*: selected item index to be displayed
- `autoPlay`: *(boolean)*: whether slideshow should play automatically
- `slideInterval`: *(number)*: interval between slides when slideshow is played
- `swipeDistance`: *(number)*: swipe distance needed for changing selected
image
- `infinite`: *(boolean)*: whether images should create infinite loop
- `showControls`: *(boolean)*: whether to show controls
- `showThumbnails`: *(boolean)*: whether to show image thumbnails
- `showArrows`: *(boolean)*: whether to show arrows for changing selected image
- `onClose`: *(() => void)*: called when close button is clicked## Links
- **Author:** [Martan03](https://github.com/Martan03)
- **GitHub repository:** [react-imagallery](https://github.com/Martan03/react-imagallery)
- **Author website:** [martan03.github.io](https://martan03.github.io)