react-image-carousel

simple react image carousel

Usage no npm install needed!

<script type="module">
  import reactImageCarousel from 'https://cdn.skypack.dev/react-image-carousel';
</script>

README

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