Skip to content

Grace951/react-image-carousel

Repository files navigation

react-image-carousel

npm version Download Count

demo gif

React image carousel is a React component for building image galleries and carousels

  • Thumbnail navigation configurable
  • Fade In/Fade Out
  • Autoplay configurable
  • Loop configurable
  • Prev/Next image

Live Demo

Live demo: https://grace951.github.io/react-image-carousel/

Example

Need more example? See examples

import { render } from 'react-dom';
import React from 'react';
import Carousel from 'react-image-carousel';

let images = [
	'/img/landing1.jpg',
	'/img/landing2.jpg',
	'/img/landing3.jpg',
	'/img/landing4.jpg',
	'/img/landing5.jpg'
];

render(<div className="my-carousel">
			<Carousel images={images} 
						thumb={true}
						loop={true}
						autoplay={3000}/>
		</div>, document.getElementById("app"))
		

Props

  • thumb: Boolean, default true
    • thumbnail navigation
  • loop: Boolean, default true
    • infinite sliding
  • image: Array, default []
    • source of images to show
  • autoplay: Number, default 3000
    • add this prop to enable autoplay, the value is set to slide interval

Notes

  • Feel free to contribute and or provide feedback!

Build the example locally

git clone https://github.com/Grace951/react-image-carousel.git
cd example/example2
npm install
npm start

Then open localhost:3000 in a browser.

License

MIT