karuseru v1.1.0

Karuseru

A simple react carousel component.

Demo

https://vacasan.github.io/karuseru/

Instalation

npm install --save karuseru

Usage

Slides only

Carousel with slides only.

import React, { Component } from 'react';
import Karuseru from 'karuseru';

class Carousel extends Component {
  constructor(props) {
    super(props);

    this.state = {
      slide: 0,
    };
  }

  onChange = ({ slide }) => {
    this.setState({ slide });
  }

  render() {
    return (
      <Karuseru
        slide={this.state.slide}
        onChange={this.onChange}
      >
        <div>hello</div>
        <div>world</div>
      </Karuseru>
    );
  }
}

With controls

Adding in the previous and next controls:

import React, { Component } from 'react';
import Karuseru from 'karuseru';

class CarouselWithControls extends Component {
  constructor(props) {
    super(props);

    this.state = {
      slide: 0,
      hasNext: true,
      hasPrev: false,
    };

    this.carousel = React.createRef();
  }

  onChange = ({ slide, length }) => {
    this.setState({
      slide,
      hasNext: slide < length - 1,
      hasPrev: slide > 0,
    });
  }

  next = () => this.carousel.current.next();

  prev = () => this.carousel.current.prev();

  render() {
    return (
      <div>
        <Karuseru
          ref={this.carousel}
          slide={slide}
          onChange={this.onChange}
        >
          {[1, 2, 3, 4].map((n) => <div key={n}>{n}</div>)}
        </Karuseru>
        <button onClick={this.prev} disabled={!hasPrev}>&lt;</button>
        <button onClick={this.next} disabled={!hasNext}>&gt;</button>
      </div>
    );
  }
}

React Simple Carousel API

Props

Methods

License

MIT