React Background Slider

⚠️ PROJECT ARCHIVED - This project has been archived as of 2025. Modern CSS has evolved significantly and background image sliders can now be implemented with pure CSS using features like @keyframes, animation, and background-image with multiple values. Consider using native CSS solutions instead:

• CSS Animation Documentation on MDN

The functionality this library provided can now be achieved with much simpler, more performant CSS-only solutions. Send me an email if need help migrating Support Mail

Simply beautiful background image slider for React 🌅

️➡️ DEMO

Intro

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.

Install

# use npm
npm install --save react-background-slider

# use yarn
yarn add react-background-slider

Usage

import BackgroundSlider from 'react-background-slider'

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

API

BackgroundSlider

• props.images - string[], 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.

Demo

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

To launch the demo app

npm start

This will start the webpack dev server locally on port 9000.

License

MIT