react-stacker

react-stacker

Carousel / slider component built with React.js. It’s flexible, fast and touch-friendly.

Examples

• To check out live examples visit https://dmitrymorozoff.github.io/react-stacker/

Getting started

Install react-stacker using npm.

npm install --save react-stacker

or if you prefer yarn

yarn add react-stacker

Usage

import React from "react";
import ReactDOM from "react-dom";
import { StackerSlide, StackerSlider } from "react-stacker";

export class App extends React.Component {
    onChangeHandler = value => {
        console.log("On change slide");
    };

    onPrevChangeHandler = event => {
        console.log("On prev change slide");
    };

    onNextChangeHandler = event => {
        console.log("On next change slide");
    };

    render() {
        const { value } = this.state;
        return (
            <StackerSlider
               dots={true}
                infiniteLoop={true}
                onChange={this.onChangeHandler}
                onPrevChange={this.onPrevChangeHandler}
                onNextChange={this.onNextChangeHandler}
            >
                <StackerSlide>
                    Slide 6/6
                </StackerSlide>
                <StackerSlide>
                    Slide 5/6
                </StackerSlide>
                <StackerSlide>
                    Slide 4/6
                </StackerSlide>
                <StackerSlide>
                    Slide 3/6
                </StackerSlide>
                <StackerSlide>
                    Slide 2/6
                </StackerSlide>
                <StackerSlide>
                    Slide 1/6
                </StackerSlide>
            </StackerSlider>
        );
    }
}

ReactDOM.render(<App />, document.getElementById("root"));

Props

Props	Type	Default	Description
className	string	-	-
zDistance	number	50	Distance between slides by z axis
yDistance	number	30	Distance between slides by y axis
transitionDuration	number	0.8	Slide transition speed. Number of milliseconds accepted.
infiniteLoop	boolean	true	Flag to make the carousel loop around when it reaches the end.
dots	boolean	false	Flag to render pagination component.
dotsColor	string	#0000007d	The fill color of pagination dots. Any valid CSS color is accepted
dotsActiveColor	string	#ff0000	The fill color of the active pagination dot. Any valid CSS color is accepted.
dotsSize	string	8px	The size of each pagination dot. Pixel values are accepted.
dotsPadding	string	6px	The padding inside each pagination dot. Pixel values are accepted.
slideWidth	string	-	Weight of the slides.
slideHeight	string	-	Height of the slides.

Events

Event	Type	Emitter
onChange	function	carousel
onPrevChange	function	carousel
onNextChange	function	carousel

Contributing

• For bugs and feature requests, please create an issue
• Lint and test your code
• Pull requests and ⭐ stars are always welcome

Raising issues

When raising an issue, please add as much details as possible. Screenshots, video recordings, or anything else that can make it easier to reproduce the bug you are reporting.

License

This project is licensed under the MIT License