# react-rev-slider

> React Rev Slider

Latest version **1.0.1** (published 2017-10-01) · 0 weekly downloads

## Install

```sh
npm install react-rev-slider
pnpm add react-rev-slider
yarn add react-rev-slider
bun add react-rev-slider
```

## 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.0.1 |
| Published | 2017-10-01 |
| First published | 2017-10-01 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Bodunde Adebiyi |
| Maintainers | bodunadebiyi |
| Keywords | react, react-component, rev-slider, revolution, slider |

## Links

- npm: https://www.npmjs.com/package/react-rev-slider
- Repository: https://github.com/bodunadebiyi/react-rev-slider
- Issues: https://github.com/bodunadebiyi/react-rev-slider/issues
- npm.io page: https://npm.io/package/react-rev-slider

## Dependencies (2)

- [classnames](https://npm.io/package/classnames.md) ^2.1.2
- [react-google-map-image](https://npm.io/package/react-google-map-image.md) ^1.0.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2017-10-01
- 1.0.0 — 2017-10-01

## README

# React Rev Slider
Exposes react components for the popular revolution slider. 
NB: For now it supports only images in the slider and not videos and designed to work with Revolution Slider 4.

## Examples

To build the examples locally, run:

```
npm install
npm start
```

Then open [`localhost:8000`](http://localhost:8000) in a browser.


## Installation

The easiest way to use react-rev-slider is to install it from NPM and include it in your own React build process (using [Browserify](http://browserify.org), [Webpack](http://webpack.github.io/), etc).

You can also use the standalone build by including `dist/react-rev-slider.js` in your page. If you use this, make sure you have already included React, and it is available as a global variable.

```
npm install react-rev-slider --save
```


## Usage
Include jquery and all the revolution slider assets in the header of your `index.html` file of your React application, then the following below.

```js
import RevSlider, { Slide, Caption } from 'react-rev-slider';

const config = {
    delay:9000,
    startwidth:1170,
    startheight:500,
    hideThumbs:10,
    fullWidth:"on",
    forceFullWidth:"on"
};

<RevSlider config={config}>
	<Slide
		src="https://i.ytimg.com/vi/dFnvYtPePRA/maxresdefault.jpg"
		alt="slidebg1"
		data-bgfit="cover"
		data-bgposition="left top"
		data-bgrepeat="no-repeat"
		slideProperties={{
			'data-transition': "fade",
			'data-slotamount': "7",
			'data-masterspeed': "1500"
		}}
	>   
		<Caption
			class="tp-caption skewfromrightshort fadeout"
			data-x="85"
			data-y="224"
			data-speed="500"
			data-start="1200"
			data-easing="Power4.easeOut"
		>
			This is a caption
		</Caption>
	</Slide>
	<Slide
		src="https://i.ytimg.com/vi/0xe4H666drk/maxresdefault.jpg"
		alt="slidebg1"
		data-bgfit="cover"
		data-bgposition="left top"
		data-bgrepeat="no-repeat"
		slideProperties={{
			'data-transition': "fade",
			'data-slotamount': "7",
			'data-masterspeed': "1500"
		}}
	>   
		<Caption
			class="tp-caption skewfromrightshort fadeout"
			data-x="85"
			data-y="224"
			data-speed="500"
			data-start="1200"
			data-easing="Power4.easeOut"
		>
			This is a caption
		</Caption>
	</Slide>
</RevSlider>
```

### Properties
Check the revolution slider documentation

### Notes

__ADDITIONAL USAGE NOTES__


## Development (`src`, `lib` and the build process)

**NOTE:** The source code for the component is in `src`. A transpiled CommonJS version (generated with Babel) is available in `lib` for use with node.js, browserify and webpack. A UMD bundle is also built to `dist`, which can be included without the need for any build system.

To build, watch and serve the examples (which will also watch the component source), run `npm start`. If you just want to watch changes to `src` and rebuild `lib`, run `npm run watch` (this is useful if you are working with `npm link`).

## License

__PUT LICENSE HERE__

Copyright (c) 2017 Bodunde Adebiyi.

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