react-background-slider
TypeScript icon, indicating that this package has built-in type declarations

4.0.0-next.3 • Public • Published

React Background Slider

JavaScript Style Guide npm version

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.

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

Readme

Keywords

none

Package Sidebar

Install

npm i react-background-slider

Weekly Downloads

513

Version

4.0.0-next.3

License

MIT

Unpacked Size

13.7 kB

Total Files

6

Last publish

Collaborators

  • u2ix