# netslider

> An animated slider component for React.

Latest version **1.3.5** (published 2021-04-27) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install netslider
pnpm add netslider
yarn add netslider
bun add netslider
```

## 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.3.5 |
| Published | 2021-04-27 |
| First published | 2019-03-12 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 219.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 15 |
| Author | Anish M Prasad |
| Maintainers | anishmprasad |
| Keywords | react, slider, animated-slider, carousel, netflix-slider, netflix |

## Links

- npm: https://www.npmjs.com/package/netslider
- Repository: https://github.com/anishmprasad/netslider
- Homepage: https://github.com/anishmprasad/netslider#readme
- Issues: https://github.com/anishmprasad/netslider/issues
- npm.io page: https://npm.io/package/netslider

## Dependencies (5)

- [react](https://npm.io/package/react.md) ^16.8.6
- [react-dom](https://npm.io/package/react-dom.md) ^16.8.6
- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [react-addons-transition-group](https://npm.io/package/react-addons-transition-group.md) ^15.6.2
- [react-addons-css-transition-group](https://npm.io/package/react-addons-css-transition-group.md) ^15.6.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.3.5 (latest) — 2021-04-27
- 1.3.4 — 2019-11-03
- 1.3.3 — 2019-07-13
- 1.3.2 — 2019-05-04
- 1.3.1 — 2019-04-24
- 1.3.0 — 2019-04-24
- 1.2.9 — 2019-04-22
- 1.2.8 — 2019-04-22
- 1.2.7 — 2019-04-19
- 1.2.6 — 2019-04-16
- 1.2.5 — 2019-04-16
- 1.2.4 — 2019-04-11
- 1.2.3 — 2019-04-07
- 1.2.2 — 2019-04-06
- 1.2.1 — 2019-04-06
- … 20 more at https://npm.io/package/netslider/versions

## README

# NetSlider

An animated slider component for React.

### Installation

```

// with npm
$ npm install react-extensions --save

// with npm
$ npm install netslider --save

// with yarn
$ yarn add netslider
```

### Usage

Here is a quick example to get you started, **it's all you need**:

```jsx
import NetSlider from 'netslider';
import 'netslider/dist/styles.min.css';
import data from './Data.json';
import SliderContainer from '../lib/SliderContainer';

function SliderTemplate(props) {
	return (
		<div className='slider-container-wrapper'>
			<SliderContainer videoModel={props.videoModel} model={props.model} />
		</div>
	);
}
export default function NetSliderContainer(props) {
	return (
		<div className='netslider-container' style={{ overflow: 'hidden', height: '400px' }}>
			<h1 style={{ textAlign: 'center', margin: '40px 0' }}>NetSlider</h1>
			<NetSlider
				className='netslider_title_card'
				data={data}
				slideTemplate={props => <SliderTemplate {...props} />}
			/>
		</div>
	);
}
```

> SliderContainer.js

```jsx
import React from 'react';

export default function SliderContainer(props) {
	return <div className='slider-container-title'>{props.videoModel.title}</div>;
}
```

> Data.json

```json
[
	{
		"evidenceData": {
			"type": "NONE",
			"key": ""
		},
		"id": 80178943,
		"image": "https://occ-0-2611-2186.1.nflxso.net/dnm/api/v5/rendition/412e4119fb212e3ca9f1add558e2e7fed42f8fb4/AAAABZ3Qq-Hzea6WbaEEZaC2cfdLKk2FESlsZZgWY8mFM9G6_GV10UWfcQGrwBUH3shcFc02eClTihN9t0_w79mxi1y3Qxf8Ah890Et7Y7mQyqMefg3nsYO4ZCNWhX2KSRiKdwCgPtbwag.jpg",
		"imageHighRes": "https://occ-0-1009-1007.1.nflxso.net/dnm/api/v6/0DW6CdE4gYtYx8iy3aj8gs9WtXE/AAAABZkgH66DOjrC0-pNCF87xxKemsjiKFPbgx0xObXY6sLghHAS-MmThmCF-LZr2V42ed3VoScabV90v0cQHYxKZFULTwYq_sIBdA.jpg?r=2f8",
		"showAsARow": {},
		"summary": {
			"id": 80178943,
			"type": "show"
		},
		"title": "The Boss Baby: Back in Business",
		"userRating": {
			"type": "thumb",
			"userRating": 0
		},
		"watchURL": "/thebossbaby",
		"rowNum": 2,
		"rankNum": 1
	}
]
```

Yes, it's really all you need to get started as you can see in this live and interactive demo:

[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/0xq2on1mwv)

### Props

| Name          | Type     | Required | Description                 |
| ------------- | -------- | -------- | --------------------------- |
| className     | `string` | `true`   | the src of image            |
| data          | `object` | `true`   | slider data object          |
| slideTemplate | `object` | `true`   | template for slider content |

### Screenshot

![Preview][screenshot]

[screenshot]: https://raw.githubusercontent.com/anishmprasad/netslider/master/screenshot/Screenshot.png 'Preview screenshot'

### Demo

-   [anish.m.prasad.com](https://anishmprasad.com/opensource/netslider)
-   [anishmprasad.github.io](https://anishmprasad.github.io/opensource/netslider)
-   [codesandbox.io](https://codesandbox.io/embed/0xq2on1mwv)

### TODO

-   [x] Minification
-   [x] Documentation
-   [x] CSS Polishing and Transitions
-   [x] Production Level

### Disclaimer

This plugin is not officially commisioned/supported by Netflix.
The trademark "Netflix" is registered by "Netflix, Inc."

### License

Apache 2.0

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