React Roll

Simple carousel component for React

Storybook demo.

---

How to use

npm i @simonpatrat/react-roll

or

yarn add @simonpatrat/react-roll

Basic usage

import React from "react";
import { Carousel } from "@simonpatrat/react-roll";

export default function MyCarousel() {
  return (
    <Carousel>
      {/* Each child is now a Slide */}
      <div>Hello</div>
      <div>World</div>
      <div>I am a slide</div>
    </Carousel>
  );
}

Advanced usage

import React from "react";
import { Carousel } from "@simonpatrat/react-roll";

export default function MyCarousel() {
  return (
    <Carousel
      autoFocus
      className="my-carousel"
      locale="en"
      numVisibleSlides={4}
      onChangeSlide={() => {}}
      responsive={{
        768: {
          numVisibleSlides: 1,
          paddingRight: "30%",
        },
        1024: {
          numVisibleSlides: 2,
          paddingRight: "20%",
        },
        1366: {
          numVisibleSlides: 3,
        },
      }}
      slidePadding="8px"
    >
      {/* Each child is now a Slide */}
      <div>Hello</div>
      <div>World</div>
      <div>I am a slide</div>
    </Carousel>
  );
}

Todo

• Better documentation on props (see storybook docs)
• Async Slide Component
• Improve Control buttons (positioning)
• Typescript
• scss support
• Storybook
• Full size option
• Infinite slides option
• Scrollable carousel option
• Tests