Carousel

Import
import { Carousel } from "reshaped";
import type { CarouselProps, CarouselInstanceRef } from "reshaped";
Works with any type of content
Handles scrolling behavior in RTL
Supports responsive layout properties
Provides access to the Carousel API methods


Usage

Carousel displays its children as carousel items which can be scrolled.

You can control how many items should be visible in the scrollable area at the same time with the visibleItems property. If it's not passed, width of the items will be defined by the width of the passed children. It means you can either pass a single number or an object with numbers based on the viewport names:

Layout

You can control the spacing between the items with gap property, which defines the multiplier of the base unit token value. This way you can align items in the Carousel with your product grid.

This property supports responsive syntax, which means you can either pass a single number or an object with numbers based on the viewport names:

In case you're on mobile viewport or just want to make the carousel take the full-width of the parent component, you can use bleed property. It will apply negative margin to the carousel while keeping the items aligned with the rest of the content. Since this property supports responsive syntax, you can apply bleed only for mobile screens and pick the value of your page padding.

Ref methods

Carousel provides access to its navigateBack and navigateForward methods through an instanceRef property. If you create a React ref and pass it to Carousel, you will be able to navigate the Carousel imperatively.

For example, you will be able to scroll Carousel with a time interval or control it with buttons rendered ouside of the component. In this case, it could be also useful to use the navigationDisplay property hidden value, to hide the original navigation controls.

Accessibility

  • Make sure to add either aria-label or aria-labelledby to the Carousel attributes to provide more context about its purpose to screen reader users
  • Navigation controls are hidden for screen reader users since Carousel is treated as a list of content and scrolling it visually doesn't help with navigation
Previous