react-configurable-carousel v1.3.2

react-configurable-carousel

A simple and responsive configurable 2D/3D carousel React component to display anything you like!

Latest Update:

Now you can use custom buttons to navigate the carousel! Jump to Section - Custom Buttons

Online Storybook Demo

3D-Style

2D-Style

Installation

npm install react-configurable-carousel

Code Examples

import { Carousel } from "react-configurable-carousel";

<Carousel
  arrows={true}
  dotsNavigation={true}
  dotsNavigationInside={true}
  width={"1200px"}
  height={"400px"}
  carouselStyle={"3d"}
>  
  <img src={imageSrc}/>  
  <MyComponent/>
  <span>
    <h2>Hello, world!</h2>
  </span>
</Carousel>;

Using custom elements as buttons

Carousel's navigation functionality can be exposed with useRef hook

JavaScript

const controllerRef = useRef();

<Carousel
  {...args}
  ref={controllRef}
>  
  <Child/>
</Carousel>;

<button onClick={() => controllerRef.current.shiftLeft()}>Shift Left</button>

TypeScript

import { CarouselControllerHandle } from "react-configurable-carousel"

const controllerRef = useRef<CarouselControllerHandle>(null);

<Carousel
  {...args}
  ref={controllRef}
>  
  <Child/>
</Carousel>;

<button onClick={() => controllerRef.current.shiftLeft()}>Shift Left</button>

Options

<Carousel /> displays the components passed in as children

It takes the following props:

Exposed navigation functionality

Type CarouselControllerHandle has the following methods: