netslider

An animated slider component for React.

Usage no npm install needed!

<script type="module">
  import netslider from 'https://cdn.skypack.dev/netslider';
</script>

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:

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