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
npm install react-configurable-carousel
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>;
Carousel's navigation functionality can be exposed with useRef
hook
const controllerRef = useRef();
<Carousel
{...args}
ref={controllRef}
>
<Child/>
</Carousel>;
<button onClick={() => controllerRef.current.shiftLeft()}>Shift Left</button>
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>
<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 |
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 |