react-zlide

    0.5.1 • Public • Published

    react-zlide

    Lightweight and stateless slider component for React.js

    It uses only css3 for sizing and animations.

    Usage

    Add react-zlide as a dependency

    $ npm install --save react-zlide

    then simply use the provided component

    Note that the component is stateless, so updating the currentSlide should be handled in the model of your app (e.g. using redux or similar flux implementations)

    The component is also unstyled (except for the slide layout and transform).

    For the Zlide component to work correctly, please be sure to have support for calc, flex and transform or eventually be sure to use polyfills.

    import React from 'react';
    import ReactDOM from 'react-dom';
     
    import Zlide from 'react-zlide';
     
    ReactDOM.render(
        <div>
            <Zlide
                currentSlide={0} // use your store to update it default to 0
                visibleSlides={3} // how many slides to show at once default to 3
                centerMode // default to true
                circular // infinite slideshow default to false
                easing={'ease-in-out'} // easing function default to ease-in-out
                slidingDuration={0.2} // sliding animation duration in ms default to 0.2
                onClick={(index) => console.log('slide click ' + index)}>
     
                ... // slides (e.g. <img> tags)
     
            </Zlide>
     
            // you may probably want to bind an action that updates the currentSlide
            // on your store to the `onClick` event
            <div onClick={() => console.log('prev click')}>
     
                prev
     
            </div>
     
            <div onClick={() => console.log('next click')}>
     
               next
     
            </div>
     
        </div>,
        document.getElementById('zlide-example')
    );
     

    Development

    Clone the repository then

    $ npm install

    use

    $ make dist

    to build

    and

    make dev

    to start a dev server on localhost:8080

    Warnings

    This component should not not be considered ready for production (until it will reach 1.0.0), however testing and contributions are really welcome.

    Install

    npm i react-zlide

    DownloadsWeekly Downloads

    20

    Version

    0.5.1

    License

    MIT

    Last publish

    Collaborators

    • avatar
    • avatar