React-opacity-carousel NPM

React Opacity Carousel

Description

Powerful, lightweight and fully customizable opacity carousel component for React apps.

Features

Fully customizable
Template insertion
Mobile friendly
SSR support
Custom animation duration
Auto play feature
Custom auto play interval
Supports anything (image/videos/text content). Each direct child will be one slide

Demo

https://github.com/hdhami

Installing as a package

npm install react-opacity-carousel --save-dev

Usage

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { OpacityCarousel } from 'react-opacity-carousel';

class DemoCarousel extends Component {
    render() {
        return (
            <OpacityCarousel duration={4000} interval={20} fade="in-out">
                <div>
                    <img src="content/a.jpeg" />
                    <p className="label">Title A</p>
                </div>
                <div>
                    <img src="content/b.jpeg" />
                    <p className="label">Title B</p>
                </div>
                <div>
                    <img src="content/c.jpeg" />
                    <p className="label">Title C</p>
                </div>
            </OpacityCarousel>
        );
    }
});

ReactDOM.render(<DemoCarousel />, document.querySelector('.opac-carousel'));

Attributes	Type	Default	Description
duration	`number`	`4000`	animation duration for the list item in miliseconds
interval	`number`	`20`	interval duration for list item's opacity state update
fade	`string`	`in-out`	type of fade effect on list item. Possible values are 'in', 'out','in-out'