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:

| Property | Type | Description | | ---------------------------- | ---------------- | ----------------------------------------------------------------------------- | | arrows | boolean | Shows/hides navigation arrows | | dotsNavigation | boolean | Shows/hides navigation dots | | width | string | CSS Property for carousel width | | height | string | CSS Property for carousel height | | children? | ReactNode | Components that will be displayed in the Carousel | | carouselStyle? | "flat" \| "3d" | Carousel style | | dotsNavigationInside? | boolean | Places navigation dots inside of carousel (Defaults to false) | | dotNavigationOutlineColor? | string | Navigation dots border color | | dotNavigationFillColor? | number | Navigation dots active fill color | | autoScrollInterval? | number | Time interval for auto-scro ll. Auto-scroll will be disabled if not specified | | autoScrollClickDelay? | number | Time delay for auto-scroll after user interacts with the carousel | | outOfFocusDarken? | boolean | Whether the elements that are not currently selected will be darkened (Defaults to false) | | ref? | React.RefObject<CarouselControllerHandle> | CarouselControllerHandle that exposes the Carousel navigation functionality |

Exposed navigation functionality

Type CarouselControllerHandle has the following methods:

| Property | Type | Description | | ---------------------------- | ---------------- | ----------------------------------------------------------------------------- | | ShiftLeft | () => void | Shifts the carousel left from current position | | ShiftRight | () => void | Shifts the carousel right from current position | | JumpToIndex | (index: number) => void | Shifts the carousel to certain index |