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)

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/
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.
Enjoy!
Related Posts
-
Date picker for React JS – react-day-picker
1 Comment | Feb 13, 2020 -
BaguetteBox.js – vanilla JS gallery and lightbox!
No Comments | Jan 28, 2019 -
Simple responsive JavaScript charts – Chartist.js
No Comments | Mar 16, 2019 -
ScriptCam :: A fully customizable jQuery webcam plugin
No Comments | Sep 10, 2016