Carousel

A Carousel is a flexible, client-side component built using Embla Carousel. It displays content horizontally or vertically in a scrollable, sliding format, with inline navigation options such as previous/next buttons and slide indicators. The component is customizable for various layouts and screen sizes through its configuration options.

Example

Preview

Carousel Header

1

2

3

4

5

6

7

8

9

10

11

12

Code

import React from 'react';
import {
  CarouselContent,
  CarouselHeaderText,
  CarouselItem,
  Carousel,
  CarouselNext,
  CarouselPrevious,
  CarouselWrapper,
} from '@hv/ui/carousel';

export default function CarouselExample({
  sm,
  md,
  lg,
  headerText,
  headerTextPosition,
  content,
  ...variants
}) {
  return (
    <CarouselWrapper {...variants}>
      <Carousel
        orientation='horizontal'
        opts={{
          sm: sm,
          md: md,
          lg: lg,
          align: 'start',
          containScroll: 'trimSnaps',
          watchResize: false,
        }}
      >
        <CarouselHeaderText position={headerTextPosition} {...headerText} />
        <CarouselContent paddingTop={variants?.paddingTop}>
          {content.map((item, i) => (
            <CarouselItem key={i}>{item}</CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious className='mt-14' title='Previous Slide'>
          Previous Slide
        </CarouselPrevious>
        <CarouselNext className='mt-14' title='Next Slide'>
          Next Slide
        </CarouselNext>
      </Carousel>
    </CarouselWrapper>
  );
}

Variants

Use theicon above to preview

Variant	Description	Values
sm	Number of columns in small screens	1 2
md	Number of columns in medium screens	1 2 3
lg	Number of columns in large screens	1 2 3 4 5 6
fullBleed	Width of the grid is flush left and right or has side padding	true false
paddingTop	Option to control spacing above the carousel	regular extra
paddingBottom	Option to control spacing below the carousel	regular extra
content	Array of carousel content	Array of content blocks
headerText	Optional text above the carousel	String
headerTextPosition	Text alignment of the header	left right center

Customization

The approach for customization will vary depending on if the customization is intended to be global for all consumers of the UI component or if it is only an override for a particular instance.

• If the customization is necessary for all use cases, update the component source code in the UI library package directly.
• Otherwise, pass className overrides. Class overrides can be applied to all sub-components.