Carousel
Slides through multiple elements using custom controls.
The
Carousel component slides through multiple elements using custom controls.Import
Import the component from @faststore/ui
_10import { 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:
_10@import '@faststore/ui/src/components/molecules/Carousel/styles.scss';
Follow the instructions in the Importing FastStore UI component styles tutorial.
Usage
This component is a work in progress, and in some cases, it may not perform as expected.
Default
Example
Code
itemsPerPage = 1Example
Code
itemsPerPage = 5Example
Code
itemsPerPage = 10Infinite Scroll Mode
This mode is only supported given the following props setup:itemsPerPage={1},variant="slide"andinfiniteMode={true}
Example
Code
Props
| 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. | false |
| 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. | scroll |
| navigationIcons | { left?: ReactNode; right?: ReactNode; } | Specifies the navigation icons. | undefined |
Design Tokens
Nested Elements
Track
| 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) |
Item
| Local token | Default value/Global token linked |
|---|---|
--fs-carousel-item-margin-right | var(--fs-spacing-3) |
Controls
| 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) |
Bullets
| 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) |
Customization
For further customization, you can use the following data attributes:
data-fs-carouseldata-fs-carousel-track-containerdata-fs-carousel-trackdata-fs-carousel-itemdata-fs-carousel-controlsdata-fs-carousel-controldata-fs-carousel-bulletsdata-fs-carousel-bulletUse Cases
Using ProductCard component
For the mobile preview, please refresh the browser after resizing it.
Example
Code
itemsPerPage = 3
Example
Code
itemsPerPage = 8Considering the component structure placed inside theCarousel, determine the idealitemsPerPagenumber to accommodate the items and achieve the desired UI properly.
Best Practices
✅ Do's
- We recommend using Carousel when the total of items being displayed is at least 10 items.
- Choose an
itemsPerPagevalue 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 onhover, 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 Morebutton to a collection. Also, make sure to check how they look on different screens.
Related components
Apple Magic Mouse
Original price:$999Price:$950.04
4k Philips Monitor 27”
Original price:$490Price:$420
Echo Dot Smart Speaker
Original price:$310Price:$280
Aedle VK-1 L Headphone
Original price:$150Price:$130
Oculus VR Headset
Original price:$344Price:$315
Apple AirPods Pro
Original price:$249Price:$229