1. Primitive UI components

Carousel

Primitive UI components in Search UI Components package, are headless, building blocks used to create the headless widget templates for React applications. You can use them to scaffold your custom widgets.

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

For a complete implementation, put together parts of the UI component as shown in the following code block.

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.
() => {
  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

This section describes the component or component parts displayed in the anatomy structure. For every component, you will find:

  • Components to which you can add it as a child.
  • Components you can add as its child.
  • Details of any properties you can set.

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

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

NameDescription
onNavigationNextEvent handler called when the next button is clicked.

tsx<br>({index}) => { //do something }<br>
onNavigationPrevEvent handler called when the previous button is clicked.

tsx<br>({index}) => { //do something }<br>

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

Parent: Carousel.Root

Children: Carousel.Slide

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

Parent: Carousel.Slides

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

Parent: Carousel.Root

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

Parent: Carousel.Root

If you have suggestions for improving this article, let us know!