# react-opacity-carousel

> Opacity Carousel with Opacity Animation on List Items

Latest version **1.4.0** (published 2018-02-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-opacity-carousel
pnpm add react-opacity-carousel
yarn add react-opacity-carousel
bun add react-opacity-carousel
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.0 |
| Published | 2018-02-08 |
| First published | 2018-02-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 10.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Harish Singh Dhami |
| Maintainers | hdhami |

## Links

- npm: https://www.npmjs.com/package/react-opacity-carousel
- Repository: https://github.com/hdhami/react-opacity-carousel
- Homepage: https://github.com/hdhami/react-opacity-carousel#readme
- Issues: https://github.com/hdhami/react-opacity-carousel/issues
- npm.io page: https://npm.io/package/react-opacity-carousel

## Dependencies (1)

- [react](https://npm.io/package/react.md) ^16.2.0

## Recent versions

- 1.4.0 (latest) — 2018-02-08
- 1.3.0 — 2018-02-08
- 1.2.0 — 2018-02-07
- 1.1.0 — 2018-02-07
- 1.0.0 — 2018-02-06

## README

# 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

```javascript
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.




[LICENSE]: <https://github.com/hdhami/react-opacity-carousel/blob/master/LICENSE>

---
_Source: https://npm.io/package/react-opacity-carousel · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._