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'

=======================

Contributing

=======================

Raising issues

=======================

License

Please see LICENSE for details.