Carousel

Import

Import the component from @faststore/ui

import { Carousel } from '@faststore/ui'

Import Styles into your FastStore project

To apply the styles of this component in your FastStore project, import the following into your stylesheet:

@import '@faststore/ui/src/components/atoms/Button/styles.scss';
@import '@faststore/ui/src/components/molecules/Carousel/styles.scss';

Follow the instructions in the Importing FastStore UI component styles tutorial.

Usage

Default

Infinite Scroll Mode

Props

Design Tokens

Nested Elements

Track

Item

Controls

Bullets

Customization

For further customization, you can use the following data attributes:

data-fs-carousel

data-fs-carousel-track-container

data-fs-carousel-track

data-fs-carousel-item

data-fs-carousel-controls

data-fs-carousel-control

data-fs-carousel-bullets

data-fs-carousel-bullet

Use Cases

Using ProductCard component

For the mobile preview, please refresh the browser after resizing it.

Best Practices

✅ Do's

• We recommend using Carousel when the total of items being displayed is at least 10 items.
• Choose an itemsPerPage value that effectively accommodates the items within the slide without compromising the UI. Consider proposing different values for mobile and desktop.
• Maintain the visibility of the controls (navigationArrows & paginationBullets) to ensure that users can easily navigate through the slider. On desktop, these controls are displayed on hover, allowing for intuitive item selection.

❌ Don'ts

• Don't exaggerate the number of items according to the item's width. You can combine it, providing an alternate navigation path like a See More button to a collection. Also, make sure to check how they look in different screens.

Related components