marvina-slider-react v1.0.0

Marvina Slider React

React integration for Marvina Slider.

NPM

npm install -–save-dev marvina-slider-react

Yarn

yarn add marvina-slider-react --dev

Installation

import React from 'react';
import * as Marvina from 'marvina-slider-react';

export default class App extends React.Component {
    render() {
        return(
            <div>
                <Marvina.Slider>                
                    <Marvina.Element>
                        <img src="img1.jpg" />
                    </Marvina.Element>
                    <Marvina.Element>
                        <img src="img2.jpg" />
                    </Marvina.Element>
                    <Marvina.Element>
                        <img src="img3.jpg" />
                    </Marvina.Element>
                </Marvina.Slider>
            </div>
        );
    }
}

Add the css file.

<link rel="stylesheet" href="/node_modules/marvina-slider-react/dist/css/marvina-slider.min.css" />

Options

*: You can give an HTML element or a CSS selector (like #carousel, .container > div:first-child)

    render() {
        return(
            <div>
                <Marvina.Slider
                    timing="linear"
                    sliderType={Marvina.SliderType.Fade}
                >                
                    <Marvina.Element
                        sliderType={Marvina.SliderType.Flow}
                    >
                        <img src="img1.jpg" />
                    </Marvina.Element>
                    <Marvina.Element>
                        <img src="img2.jpg" />
                    </Marvina.Element>
                    <Marvina.Element
                        sliderType={Marvina.SliderType.Carousel}
                    >
                        <img src="img3.jpg" />
                    </Marvina.Element>
                    <Marvina.Element>
                        <img src="img4.jpg" />
                    </Marvina.Element>
                </Marvina.Slider>
            </div>
        );
    }

Slider Element

It is a object which specifies one single slider element. It has the following attributes.

• el: HTMLElement;
• wrapperEl: HTMLDivElement;
• sliderType: SliderType;
• before: (el:SliderElement, active:boolean) => Promise;
• after: (el:SliderElement, active:boolean) => Promise;

Slider Type

Specfies the slider animation type.

• Carousel
• Flow
• Fade

As List

You can declare your list as a slider list.

• It can be a ul or ol element.
• It can be anywhere in the body.
• List is updated when index is changed.
• Assigns ms-active class to list element that holds the current index.

Callbacks

before(current: SliderElement, next: SliderElement): Promise \ It is invoked before animation runs. It returns a promise so that animation waits for the mehtod to complete.

after(current: SliderElement, prev: SliderElement): Promise \ It is invoked after animation runs. It returns a promise so before the method completes running, another animation cannot run.

You can pass callbacks as props Slider component or to specify for one element to Element component.

    before(current, next) {
        return new Promise(resolve => {
            // ...
            resolve();
        });
    }

    render() {
        return(
            <div>
                <Marvina.Slider
                    before={this.before}
                >                
                    <Marvina.Element>
                        <img src="img1.jpg" />
                    </Marvina.Element>
                    <Marvina.Element>
                        <img src="img2.jpg" />
                    </Marvina.Element>
                    <Marvina.Element>
                        <img src="img3.jpg" />
                    </Marvina.Element>
                </Marvina.Slider>
            </div>
        );
    }

Callbacks For Specified Elements

before(el:SliderElement, active:boolean): Promise \ It is invoked before animation runs. It returns a promise so that animation waits for the mehtod to complete. It is only invoked when it is the current or next element. If it is the next element, active is true.

after(el:SliderElement, active:boolean): Promise \ It is invoked after animation runs. It returns a promise so before the method completes runing, another animation cannot run. It is only invoked when it is the current or previous element. If it is the current element, active is true.

    after(current, active) {
        return new Promise(resolve => {
            // ...
            resolve();
        });
    }

    render() {
        return(
            <div>
                <Marvina.Slider>                
                    <Marvina.Element
                        after={this.after}
                    >
                        <img src="img1.jpg" />
                    </Marvina.Element>
                    <Marvina.Element>
                        <img src="img2.jpg" />
                    </Marvina.Element>
                    <Marvina.Element>
                        <img src="img3.jpg" />
                    </Marvina.Element>
                </Marvina.Slider>
            </div>
        );
    }

Events

    componentDidMount() {
        this.slider.el.addEventListener('touchStart', () => {
            console.log('touching starts');
        });

        this.slider.el.addEventListener('touchEnd', () => {
            console.log('touching ends');
        });
    }

    render() {
        return(
            <div>
                <Marvina.Slider ref={node => this.slider = node}>                
                    // ...
                </Marvina.Slider>
            </div>
        );
    }

Methods

*: You can give an HTML element or a CSS selector (like #carousel, .container > div:first-child)

IE Support

IE 10 is not supported and patches to fix problems will not be accepted.

License

Marvina Slider React is provided under the MIT License.