Responsive ReactJS carousel gallery: react-image-gallery

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


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

Sample JS

import ImageGallery from 'react-image-gallery';

class MyComponent extends React.Component {

  render() {
    const images = [
        original: '',
        thumbnail: '',
        original: '',
        thumbnail: ''
        original: '',
        thumbnail: ''

    return (
      <ImageGallery items={images} />


License: MIT

Homepage/ GitHub



See also

Cube Slider – awesome CSS3 3D images slider

jQuery circular carousel plugin

Javascript Image Slider – Non jQuery

Medium-zoom – a JavaScript library for zooming images

JS video and photo gallery – blueimp

Detect mobile in JavaScript – Vue.js example

… and more interesting solutions for Web Developers.