<Carousel> Component

Installing <Carousel> Component

There are 2 ways to install <Carousel> component into your react app project:

• Install the Specific Package of <Carousel> Component
• Install the Whole Reusable-UI Component Pack, including the <Carousel> Component

infiniteLoop Property

Makes an infinite illusion as if the <Carousel> has infinite items when the user scrolls the <Carousel>.

The possible values are:

• undefined
• false
• true

Here the preview:

scrollingRef Property

Gets the DOM element reference of the scrolling container used for an external <Navscroll>.

Here the preview:

Variant Properties

The alternative appearances of the <Carousel> layout without changing the <Carousel>'s functionality.

Component Properties

Overwrites the internal (sub) components used as the composition of <Carousel> component.

<Carousel basicComponent={
    <MyCustomBasic />
} />

<Carousel prevButtonComponent={
    <MyCustomPrevButton />
} />

<Carousel nextButtonComponent={
    <MyCustomNextButton />
} />

<Carousel navscrollComponent={
    <MyCustomNavscroll />
} />

Inherited Properties

Because <Carousel> is made from <Basic>, so all properties from <Basic> are inherited.

You can see the documentation of <Basic> here.

Variables

There are several variables of <Carousel> you can customize. Changing the variables affects all <Carousel> instance and other components that depend on <Carousel>.

Here the exposed variables:

• Backgrounds, Foregrounds, Borders, & Rings
  • navBtnBorderWidth

    The thickness of border (stroke) of the prev/next button.

  • navBtnBorderRadius

    The rounded corner radius of the prev/next button.

• Spacings
  • paddingInline

    The inner spacing on the left & right of the <Carousel>.

  • paddingBlock

    The inner spacing on the top & bottom of the <Carousel>.

  • navMarginBlockEnd

    The default outer spacing on the bottom of the navigation bullets.

  • navMarginBlockEndSm

    The outer spacing on the bottom of the navigation bullets when size='sm'.

  • navMarginBlockEndLg

    The outer spacing on the bottom of the navigation bullets when size='lg'.

The example of accessing, modifying, & adding variables: