Carousel

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

• Lightweight: Just +5.5kb on top of the motion component.

• 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+ library 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\?package\=motion-plus\&version\=2.0.0\&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.

Infinite scrolling

By default, carousels will scroll infinitely. This can be disabled by setting loop={false}.

<Carousel items={items} loop={false} />