Carousel

The Carousel primitive component is a slideshow navigating through a collection of content. It works with a series of images, text, or custom markup. It supports previous/next controls. The component does not automatically normalize slide dimensions. As such, you need use additional utilities or custom styles to appropriately size content.

This topic describes the anatomy, API reference, and variations of the CardViewSwitcher primitive component.

Anatomy

RequestResponse
import { Carousel } from '@sitecore-search/ui';

const MyCarouselComponent = () => (
  <Carousel.Root>
    <Carousel.Slides>
      <Carousel.Slide aria-label="Slide 1">
        Slide 1
      </Carousel.Slide>
      <Carousel.Slide aria-label="Slide 2">
        Slide 2
      </Carousel.Slide>
    </Carousel.Slides>

    <Carousel.Previous aria-label="Show previous">
      Previous
    </Carousel.Previous>

    <Carousel.Next aria-label="Show next">
      Next
    </Carousel.Next>
  </Carousel.Root>
);

Using the component

This section describes use of the Carousel primitive component. You can copy and paste these code blocks into your React application.

Screenshot of a styled Carousel primitive component.
RequestResponse
() => {
  return (
    <StoryFrame>
      <div style={{ position: 'relative', width: '100%' }}>
        <Slider>
          <SliderWrapper tabIndex={0}>
            <SlideWrapper>
              <SlideContent style={{ background: 'red' }}>1</SlideContent>
            </SlideWrapper>
            <SlideWrapper>
              <SlideContent style={{ background: 'blue' }}>2</SlideContent>
            </SlideWrapper>
            <SlideWrapper>
              <SlideContent style={{ background: 'yellow' }}>3</SlideContent>
            </SlideWrapper>
            <SlideWrapper>
              <SlideContent style={{ background: 'turquoise' }}>4</SlideContent>
            </SlideWrapper>
            <SlideWrapper>
              <SlideContent style={{ background: 'grey' }}>5</SlideContent>
            </SlideWrapper>
            <SlideWrapper>
              <SlideContent style={{ background: 'pink' }}>6</SlideContent>
            </SlideWrapper>
            <SlideWrapper>
              <SlideContent style={{ background: 'green' }}>7</SlideContent>
            </SlideWrapper>
          </SliderWrapper>

          <PreviousControl aria-label="Show previous demo" tabIndex={-1}>
            <ArrowLeftIcon />
          </PreviousControl>

          <NextControl aria-label="Show next demo" tabIndex={-1}>
            <ArrowRightIcon />
          </NextControl>
        </Slider>
      </div>
    </StoryFrame>
  );
}

API reference

Carousel.Root

The Carousel.Root component contains all the parts of the carousel.

Children: Carousel.Slides, Carousel.Previous, and Carousel.Next

Name

Description

onNavigationNext

Event handler called when the next button is clicked.

RequestResponse
({index}) => { //do something }

onNavigationPrev

Event handler called when the previous button is clicked.

RequestResponse
({index}) => { //do something }

Carousel.Slides

The Carousel.Slides component contains all the Carousel.Slide components.

Parent: Carousel.Root

Children: Carousel.Slide

Carousel.Slide

The Carousel.Slide component contains the content to be displayed.

Parent: Carousel.Slides

Carousel.Next

The Carousel.Next component triggers the next page on the carousel.

Parent: Carousel.Root

Carousel.Previous

The Carousel.Previous component triggers the previous page on the carousel.

Parent: Carousel.Root

Do you have some feedback for us?

If you have suggestions for improving this article,