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:

Props

Screenshot

Demo

• anish.m.prasad.com
• anishmprasad.github.io
• codesandbox.io

TODO

• <input checked="" disabled="" type="checkbox"> Minification
• <input checked="" disabled="" type="checkbox"> Documentation
• <input checked="" disabled="" type="checkbox"> CSS Polishing and Transitions
• <input checked="" disabled="" type="checkbox"> Production Level

Disclaimer

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

License

Apache 2.0