Slim React Carousel

A small composable carousel using React for rendering.

Demo

Coming soon

Install

npm install --save slim-react-carousel

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import { Carousel, Slides, SlideImg, Arrows, Dots } from 'slim-react-carousel';

ReactDOM.render(
  <Carousel>

    <Slides>
      <SlideImg><img src="..." /></SlideImg>
      <SlideImg><img src="..." /></SlideImg>
      <SlideImg><img src="..." /></SlideImg>
    </Slides>

    <Arrows />
    <Dots />

  </Carousel>,
  document.body
);

Components

Carousel

name	type	default	description
slidesToScroll	number	1	How many slides to scroll at the same time
loopAround	bool	true	Loop around when you pass first / last slide
autoPlay	bool	false	Step through the carousel automatically
timer	number	2000	Time between each slide when autoPlay is enabled
resetOnInteraction	bool	true	Padding around each slide

Slides

name	type	default	description
dragThreshold	number	80	How many slides to scroll at the same time
slidePadding	number	0	Padding around each slide
slidesToShow	number	1	How many slides to show at the same time
direction	string	"x"	Direction of the carousel. "x" or "y"
frameStyles	object	{}	Styling of the frame
trackStyles	object	{}	Styling of the track
slideStyles	object	{}	Styling of each slide