Responsive ReactJS carousel gallery: react-image-gallery

DirectCode | February 7, 2019 | Gallery, Mobile, Multimedia, Responsive, Slider, Zoom | No Comments

A good solution of ReactJS carousel image gallery. This component brings many useful features, such as thumbnails, slider, swipe and more, as we mobile support!

ReactJS carousel gallery: react-image-gallery

ReactJS carousel gallery is a component for building image galleries and carousels easy.

Features of react-image-gallery:

– Mobile Swipe Gestures
– Thumbnail Navigation
– Tons of customization options (see props below)
– Custom Rendered Slides
– Responsive Design
– Fullscreen Support
– Lightweight ~8kb (gzipped, excluding react)

react-image-gallery - ReactJS carousel gallery — react-image-gallery – ReactJS carousel gallery

Setup

npm install react-image-gallery

Import styles

# CSS (or SCSS)
@import "node_modules/react-image-gallery/styles/css/image-gallery.css"

# Webpack
import "react-image-gallery/styles/css/image-gallery.css"

# Stylesheet with no icons
node_modules/react-image-gallery/styles/scss/image-gallery-no-icon.scss
node_modules/react-image-gallery/styles/css/image-gallery-no-icon.css

Sample JS

import ImageGallery from 'react-image-gallery';

class MyComponent extends React.Component {

  render() {
    const images = [
      {
        original: 'http://lorempixel.com/1000/600/nature/1/',
        thumbnail: 'http://lorempixel.com/250/150/nature/1/',
      },
      {
        original: 'http://lorempixel.com/1000/600/nature/2/',
        thumbnail: 'http://lorempixel.com/250/150/nature/2/'
      },
      {
        original: 'http://lorempixel.com/1000/600/nature/3/',
        thumbnail: 'http://lorempixel.com/250/150/nature/3/'
      }
    ]

    return (
      <ImageGallery items={images} />
    );
  }

}

License: MIT

Homepage/ GitHub
https://github.com/xiaolin/react-image-gallery

Demo

http://linxtion.com/demo/react-image-gallery/