Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Carousel

v.1.0.0 | Saturn
Healthy
StorybookGithubFigma

Slideshow component for browsing through a list of elements, the elements can be interactive, like a carousel.

import { Carousel } from '@kubit-ui-web/react-components'
12345678910
<Carousel
  variant="DEFAULT"
  elements={[
    <ReplaceContent key={0} width="120px">
      0
    </ReplaceContent>,
    <ReplaceContent key={1} width="120px">
      1
    </ReplaceContent>,
    <ReplaceContent key={2} width="120px">

Variant

In Kubit Design System, users have the freedom to generate variants for each component according to their needs. While predefined variants are provided as examples, they can be modified or new ones can be added to align with the specific requirements of each project.

We have set this predefine style for its quick use, access them through the variant prop:

12345678910
<Carousel
  variant="DEFAULT"
  elements={[
    <ReplaceContent key={0} width="120px">
      0
    </ReplaceContent>,
    <ReplaceContent key={1} width="120px">
      1
    </ReplaceContent>,
    <ReplaceContent key={2} width="120px">

Elements

Array of the different slides or elements that will be displayed in the carousel. A limit of items can be set with the numElementsPerPage prop.

12345678910
<Carousel
  variant="DEFAULT"
  elements={[
    <ReplaceContent key={0} width="120px">
      0
    </ReplaceContent>,
    <ReplaceContent key={1} width="120px">
      1
    </ReplaceContent>,
    <ReplaceContent key={2} width="120px">

Pagination control

The paginator element can be adjust through different props such as:

  • pageControlVariant: required prop for the paginator variant.
  • hasPagination: if the boolean prop is set TRUE the paginator will be displayed.

Also, depending on the type of carousel component (uncontrolled or controlled) the props for add and modify the arrows may change. For further information visit the code api window of the component.

12345678910
<Carousel
  variant="DEFAULT"
  elements={[
    <ReplaceContent key={0} width="120px">
      0
    </ReplaceContent>,
    <ReplaceContent key={1} width="120px">
      1
    </ReplaceContent>,
    <ReplaceContent key={2} width="120px">
BreadcrumbsAccessibility
CarouselDesign Specs