JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 22
  • Score
    100M100P100Q36359F
  • License MIT

Made with create-react-library

Package Exports

  • react-crossfade-responsive

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-crossfade-responsive) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-crossfade-carousel

Made with create-react-library

This is a very easy-to-use crossfade carousel. I created this one because I experiences in most of the cases issues when using the other ones. (Some of them makes white blinks during the transitions).

NPM JavaScript Style Guide

Install

npm install --save react-crossfade-carousel

Usage

To use it, just provide an array of images to the component and pass it as a prop called "images".

It is 100% responsive.

Example

To can see an example of this crossfade by visiting this page: see it in action

import React from 'react'
import Crossfade from 'react-crossfade-carousel'
import 'react-crossfade-carousel/dist/index.css'

const App = () => {
  return <Crossfade images={testImages} />
}

export default App

You can customize the interval setting the customInterval prop:

<Crossfade images={testImages} customInterval={2000} />

1000 = 1 sec.

By default, it is set on 5000.

License

MIT © a-rolland