The Carousel component creates performant, accessible and fully-featured carousels in React. It's designed to be flexible and easy to use, supporting pointer, wheel and keyboard navigation out the box.
It allows you to go beyond the traditional limitations of CSS-only approaches, with support for infinitely-scrolling carousels and without limitations on styling.
Features
-
Accessible: Automatic ARIA labels, respects reduced motion, RTL layouts, and all major input methods.
-
Performant: Built on the same unique rendering used by the Ticker component that achieves infinite scrolling with while minimising or eliminating item cloning.
-
Customisable: Provides functions and state to easily create custom controls and pagination.
Install
First, add the motion-plus package to your project using your private token. You need to be a Motion+ member to generate a private token.
npm install "https://api.motion.dev/registry.tgz?package=motion-plus&version=2.11.0&token=YOUR_AUTH_TOKEN"Usage
Import
Import the Carousel component from "motion-plus/react"`:
import { Carousel } from "motion-plus/react"Carousel accepts a single mandatory prop, items. This is a list of valid React nodes (which can be components, strings or numbers):
const items = [
<span>One</span>,
<span>Two</span>,
<span>Three</span>
]
return <Carousel items={items} />Direction
By default, carousels will scroll horizontally. Setting the axis prop to y, we can make them vertical.
<Carousel items={items} axis="y" />Layout
Items are laid out via flexbox. Passing gap and align will adjust the spacing and off-axis alignment of them items.
<Carousel items={items} gap={0} align="start" />Overflow
By setting overflow to true, items will visually extend out from the container to the edges of the viewport.
<Carousel items={items} overflow />This makes it straightforward to place a Carousel within a document flow but still extend the ticker effect across the full viewport.