Skip to content

anishmprasad/netslider

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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:

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

import React from 'react';

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

Data.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

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

Demo

TODO

  • Minification
  • Documentation
  • CSS Polishing and Transitions
  • Production Level

Disclaimer

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

License

Apache 2.0