Simply beautiful background image slider for React 🌅

️➡️ DEMO

This component is meant to be used as a full viewport background slideshow that can easily add a slick, polished feel to pages that don't have much content.

I've personally used it for several projects as the background for login / signup / dialog screens where the only content is a single foreground modal generally prompting the user for some info.

# npm
$ npm install --save react-background-slider
# yarn
$ yarn add react-background-slider

import BackgroundSlider from 'react-background-slider'

<BackgroundSlider
  images={[image1, image2, ...]}
  duration={10} transition={2} />

• props.images - array, required array of images to transition between.
• props.duration - number, duration of which each image is displayed (default 10)
• props.transition - number, duration of the transition (default 2)

The component will start with the first image.

This repo comes with an example create-react-app under example/ that can be run locally to experiment with the component. This demo is also hosted here.

cd example
npm install
npm start

This will start the create-react-app dev server locally on port 3000 and open the demo app in your default browser.

MIT