Carousel

Slides through multiple elements using custom controls.

We recommend using Carousel when displaying at least 10 items.

Import

Import the component from @faststore/ui

import { Carousel } from '@faststore/ui'

Import Styles

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

⚠️

This component is a work in progress, so it might work as expected in some cases, we gratefully accept feedback.

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

Name	Type	Description	Default
id	`string`	ID of the current instance of the component.	`fs-carousel`
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).	`fs-carousel`
className	`string`	Returns the value of element's class content attribute.
aria-label	`string`	Defines a string value that labels the current element when title is not used.
infiniteMode	`false \| true`	Whether or not the Carousel is infinite slide/scroll. Only for the `slide` variant.	`true`
controls	`"complete" \| "navigationArrows" \| "paginationBullets"`	Specifies which navigation elements should be visible.	`complete`
transition	`{ duration: number; property: string; delay?: number; timing?: string; }`	Specifies the slide transition. Only for the `slide` variant	`{ duration: 400, property: 'transform', }`
itemsPerPage	`number`	Specifies the number of items per page.	`1`
variant	`"slide" \| "scroll"`	Specifies the Carousel track variant.	`slide`
navigationIcons	`{ left?: ReactNode; right?: ReactNode; }`	Specifies the navigation icons.	`undefined`

Local token	Default value/Global token linked
`--fs-carousel-padding-mobile`	`var(--fs-spacing-0) var(--fs-grid-padding)`

Local token	Default value/Global token linked
`--fs-carousel-padding-desktop`	`var(--fs-spacing-0) calc((100% - var(--fs-grid-max-width))/2) var(--fs-spacing-0)`

Local token	Default value/Global token linked
`--fs-carousel-item-width-mobile`	`60%`
`--fs-carousel-item-width-tablet`	`14.2rem`
`--fs-carousel-item-width-desktop`	`14.4rem`
`--fs-carousel-item-margin-right`	`var(--fs-spacing-3)`

Local token	Default value/Global token linked
`--fs-carousel-controls-width`	`3.125rem`
`--fs-carousel-controls-height`	`var(--fs-carousel-controls-width)`
`--fs-carousel-controls-bkg-color`	`var(--fs-color-neutral-0)`
`--fs-carousel-controls-border-radius`	`var(--fs-border-radius-circle)`
`--fs-carousel-controls-box-shadow`	`var(--fs-shadow-darker)`

`--fs-carousel-controls-control-left`	`var(--fs-spacing-4)`
`--fs-carousel-controls-control-right`	`var(--fs-carousel-controls-control-left)`
`--fs-carousel-controls-control-max-left`	`calc(-1 * var(--fs-spacing-11))`
`--fs-carousel-controls-control-max-left`	`var(--fs-carousel-controls-control-max-left)`

Local token	Default value/Global token linked
`--fs-carousel-bullets-padding-top`	`var(--fs-carousel-controls-control-left)`
`--fs-carousel-bullets-padding-left`	`var(--fs-spacing-3)`
`--fs-carousel-bullets-padding-right`	`var(--fs-carousel-bullets-padding-left)`
`--fs-carousel-bullets-column-gap-mobile`	`var(--fs-carousel-item-margin-right)`
`--fs-carousel-bullets-column-gap-tablet`	`var(--fs-spacing-3)`

`--fs-carousel-bullet-width-mobile`	`100%`
`--fs-carousel-bullet-width-desktop`	`var(--fs-spacing-1)`
`--fs-carousel-bullet-height-mobile`	`var(--fs-carousel-item-margin-right)`
`--fs-carousel-bullet-height-desktop`	`var(--fs-carousel-bullet-width-desktop)`
`--fs-carousel-bullet-bkg-color`	`var(--fs-color-neutral-3)`
`--fs-carousel-bullet-bkg-color-selected`	`var(--fs-color-main-4)`
`--fs-carousel-bullet-border-radius`	`var(--fs-carousel-controls-border-radius)`

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

Always use more than 1 item per page so then the component keeps the proposed navigation behavior for both versions (mobile and desktop).
We recommend using Carousel when displaying at least 10 items.
Keep the controls (navigationArrows & paginationBullets) visible. It's important to let people in slider control to move the items.

Avoid using it when display 1 or 2 items.
Don't exaggerate the number of items. You can combine it, providing an alternate navigation path like a See More button to a collection.