Carousel

A Carousel displays content in a carousel with inline navigation. The UI package contains a base Carousel and a ResponsiveCarousel. Within the High Velocity CMS pacakge (hv-cms), a third variation - a ContentCarousel - is used with CMS content. The ContentCarousel uses the UI components configured from within the CMS as its slides. The carousel is built with Embla Carousel. All carousels are client-side components ('use client').

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,
} from '@hv/ui/carousel';
import {
  ResponsiveCarousel,
  ResponsiveCarouselNavigation,
  ResponsiveCarouselNext,
  ResponsiveCarouselPrevious,
  ResponsiveCarouselContainer,
  ResponsiveCarouselWrapper,
} from '@hv/ui/carousel';

export default function CarouselExample({
  content,
  id,
  headerText,
  headerTextPosition,
  paddingTop,
  paddingBottom,
  fullBleed = true,
  ...variants
}) {
  const componentPaddingTop = paddingTop === 'extra' ? 'pt-10' : '';
  const componentPaddingBottom = paddingBottom === 'extra' ? 'pb-10' : '';
  return (
    <ResponsiveCarouselContainer
      className={`${componentPaddingBottom} ${componentPaddingTop}`}
    >
      <ResponsiveCarouselWrapper>
        <ResponsiveCarousel
          orientation='horizontal'
          opts={{
            sm: variants.sm,
            md: variants.md,
            lg: variants.lg,
            align: 'start',
            containScroll: 'trimSnaps',
            watchResize: false,
          }}
        >
          <CarouselHeaderText headerTextPosition={headerTextPosition}>
            {headerText}
          </CarouselHeaderText>
          <CarouselContent>
            {content.map((item, i) => (
              <CarouselItem key={i}>{item}</CarouselItem>
            ))}
          </CarouselContent>
          <ResponsiveCarouselNavigation
            strings={{
              goToSlide: 'Go to slide',
            }}
            className='absolute bottom-0 left-0 right-0 flex justify-center gap-1'
          />
          <ResponsiveCarouselPrevious className='bg-muted dark:hover:text-primary opacity-100'>
            Previous slide
          </ResponsiveCarouselPrevious>
          <ResponsiveCarouselNext className='bg-muted dark:hover:text-primary opacity-100'>
            Next slide
          </ResponsiveCarouselNext>
        </ResponsiveCarousel>
      </ResponsiveCarouselWrapper>
    </ResponsiveCarouselContainer>
  );
}

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
headerTextPosition	Text alignment of the header	Left Right Center

Customization

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 of in the ui library package directly.
• Otherwise, pass className overrides. Class overrides can be applied to all sub-components except for the CarouselHeaderText.