Skip to content

Latest commit

 

History

History
114 lines (88 loc) · 4.15 KB

README.md

File metadata and controls

114 lines (88 loc) · 4.15 KB
Raw

react-stacker

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

Imgur

Examples

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