Carousel

Version	Tag	Status	API
v1	`<oc-carousel-v1>`	Stable, allowed for generation	CarouselV1

Overview (v1)

Source: ./src/components/carousel/v1/Overview.mdx

The carousel component provides a way to display multiple items in a horizontal slide. This component is useful in cases where visual space is limited, and you want to present a series of related content (e.g., images or cards) that the user can navigate through.

Default variation

Story Default:

<oc-carousel-v1 oc-aria-label="carousel of placeholders">
  <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
</oc-carousel-v1>

Configuration

The carousel component is configurable, allowing you to tailor its features and appearance to your specific needs. To explore all the available options and adjust the component, use the component configurator and see the changes affect the component in real-time.

Usage guidelines

Before integrating the carousel component into your project, make sure you have correctly installed the OTTO components package. Look through the variations page for examples of possible component variations. Here, you can discover both common and specific variations that address different use cases.

Info

See the Carousel UX documentation for detailed user experience guidelines.

Accessibility

The carousel component comes with a set of built-in accessibility features to ensure a seamless experience for all users.

Use `oc-aria-label`

To make the carousel recognizable for screen readers, use the oc-aria-label attribute to provide clear and descriptive context information. See the general accessibility documentation for guidance on using oc-aria-label, including how it works with link and masked link behavior.

Events

The carousel component provides events for checking the item visibility and the stage scroll state.

Item visibility changed

The oc-item-visibility-changed event triggers, whenever a slide enters or leaves the viewport. The event returns an object that provides an array with one visible item, the index position of the item's slide, the scroll direction of the carousel stage, whether it is currently scrolling or not and the source that triggered the scroll:

myCarousel.addEventListener("oc-item-visibility-changed", (event) => {
  event.detail; // Returns: { { visibleItem: {element: HTMLElement; index: number }, scrollDirection: "left | right", stageIsScrolling: boolean, scrollSource: "arrows" | "pagination-dots" | "move-method" | "swipe" }
});

For more information on tracking the visibility state of the component itself, see the visibility tracking documentation.

Stage scroll

The oc-stage-scroll event triggers when the stage is being scrolled. It returns the boolean isScrolling that reflects the current state as well as the source that initiated the scroll:

myCarousel.addEventListener("oc-stage-scroll", (event) => {
  event.detail; // Returns: { isScrolling: boolean, source: "arrows" | "pagination-dots" | "move-method" | "swipe" }
});

Sources that initiate the scroll can be:

arrows - When the user interacts via the visual buttons.
pagination-dots - When the user interacts via the additional pagination-dots.
move-method - When the stage is being scrolled programmatically.
swipe - When the user interacts via swipe gestures on smartphones or laptop touchpads.

Configuration (v1)

Source: ./src/components/carousel/v1/Configuration.mdx

Carousel configuration

Configure the carousel component with the controls below and see the changes live in the preview canvas. Click the Show code button within the preview canvas to see the source code for the current component configuration.

Story Default:

<oc-carousel-v1 oc-aria-label="carousel of placeholders">
  <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
</oc-carousel-v1>

Interactive configurator (Storybook controls); every option is listed in the API section of this file.

API v1

Source: ./src/components/carousel/v1/CarouselV1.API.g.mdx

Carousel v1 API

API: `<oc-carousel-v1>` (CarouselV1)

The Carousel component provides a way to display multiple items in a horizontal slide. This component is useful in cases where visual space is limited, and you want to present a series of related content (e.g., images or cards) that the user can navigate through.

The Carousel component supports navigation through arrow buttons. The position of these buttons can be customized. It also supports ARIA labels for accessibility.

Attributes / properties

Attribute	Type	Default	Required	Description
`size`	`"50" \| "100"`	`"100"`	no	Sets the size of the carousel
`visible-item`	`HTMLElement`		no	The current visible item.
`arrow-buttons-on-hover`	`boolean`	`false`	no	Indicates whether the arrow buttons are only visible on hover.
`hide-arrow-buttons`	`boolean`	`false`	no	Indicates whether the arrow buttons are hidden.
`hide-pagination-dots`	`boolean`	`false`	no	Indicates whether the pagination-dots are hidden.
`hide-skip-link`	`boolean`	`false`	no	Indicates whether the skip link that allows users to skip the carousel content is hidden.
`arrow-button-position`	`string`	`"50%"`	no	Specifies the custom position of the arrow buttons. This can be any valid CSS value for the top property. The arrow buttons are used to navigate through the items in the carousel.
`oc-aria-label`	`string`		yes	Sets the ARIA label of the carousel section. This label is used by screen readers to provide context to users with visual impairments. The label should describe the overall content or purpose of the carousel. Note: This is mandatory for skipping the carousel with modern screen readers.

Slots

Slot	Required	Description
`default`	yes	Defines the main content of the carousel. This slot should contain a series of items (e.g., images or cards) that you want to present in a carousel format.

Events

Event	Detail type	Description
`oc-item-visibility-changed`	`CustomEvent<{ visibleItem: { element: HTMLElement; index: number; }; scrollDirection: "left" \| "right"; stageIsScrolling: boolean; scrollSource?: "arrows" \| "pagination-dots" \| "move-method" \| "swipe" \| undefined; }>`	The `oc-item-visibility-changed` event triggers, whenever a slide enters or leaves the viewport. The event returns an object that provides an array with one visible item, the index position of the item's slide, and the scroll direction of the carousel stage The event returns a boolean of the current state of the stage as well as the source that initiated the scroll.
`oc-stage-scroll`	`CustomEvent<{ isScrolling: boolean; source?: "arrows" \| "pagination-dots" \| "move-method" \| "swipe" \| undefined; }>`	Scrolling the carousel triggers the `oc-stage-scroll` event. The event returns a boolean of the current state as well as the source that initiated the scroll.
`oc-property-change`	`OcCarouselV1Events["oc-property-change"]`	Whenever a property value changes, this event triggers. Use this event to track all property changes within the component. Refer to the Events documentation for more information.
`oc-mount`	`{ component: string; }`	Fired when the component is mounted to the DOM. The event is fired when the onMount hook of the component is called by the runtime.
`oc-unmount`	`{ component: string; }`	Fired when the component is unmounted from the DOM. The event is fired when the function returned by the onMount hook of the component is called by the runtime.

Methods

moveTo: (index: number, options?: { source?: "arrows" | "pagination-dots" | undefined; reducedMotion?: boolean | undefined; } | undefined) => void

Programmatically moves the stage of the carousel.

Parameters:
- index: number - The index of the slide that should be scrolled to.
- options: { source?: "arrows" | "pagination-dots" | undefined; reducedMotion?: boolean | undefined; } | undefined - Optional scroll behavior settings.
Returns: void

Example:
```
const carousel = document.querySelector("oc-carousel-v1");
carousel.moveTo(2, { reducedMotion: true, source: "arrows" });
```

CSS custom properties

Custom property	Default	Description
`--overflow-behavior`	`unset`	Defines the overflow behavior of the carousel stage. This variable controls how the content that exceeds the visible area of the carousel is handled. It can be set to values like `auto`, `hidden`, or `scroll` to determine whether scrollbars are shown and how users can navigate through the overflow content.

Variations (v1)

Source: ./src/components/carousel/v1/Variations.mdx

Variations

Listed below are the most common variations of the carousel component as well as specific component variations for different use cases.

You can explore all available options using the component configurator, adjust the component to your needs, and see the changes live in a preview canvas.

Default

Story: components-carousel-variations--default · tags: components

The default configuration uses the component to render a carousel with 16 placeholders.

<oc-carousel-v1 oc-aria-label="carousel of placeholders">
  <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
</oc-carousel-v1>

Size 50

Story: components-carousel-variations--size-50 · tags: components

The size 50 configuration uses the component to render a smaller carousel with 16 placeholders.

Args: size=50

<oc-carousel-v1 oc-aria-label="carousel of placeholders" size="50">
  <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
          <oc-placeholder-v1 style="height: 100px" interactive="true">Placeholder</oc-placeholder-v1>
</oc-carousel-v1>

With video

Story: components-carousel-variations--with-video · tags: components

The configuration with items + a video. Via a data-attribute, a slide can be flagged to have a play icon instead of a dot in the pagination dots stage.

Args: defaultSlot=(see snippet)

<oc-carousel-v1 oc-aria-label="carousel of placeholders">
  <oc-placeholder-v1 interactive="true">ITEM 1</oc-placeholder-v1>
  <oc-placeholder-v1  interactive="true">ITEM 2</oc-placeholder-v1>
  <oc-placeholder-v1  interactive="true">ITEM 3</oc-placeholder-v1>
  <video data-oc-carousel-v1.item-type="video" height="240" controls></video>
  <oc-placeholder-v1  interactive="true">ITEM 5</oc-placeholder-v1>
  <oc-placeholder-v1  interactive="true">ITEM 6</oc-placeholder-v1>
  <oc-placeholder-v1  interactive="true">ITEM 7</oc-placeholder-v1>
</oc-carousel-v1>

Arrow-Buttons on Hover

Story: components-carousel-variations--arrow-buttons-on-hover · tags: components

The configuration with arrow buttons to only be visible during hover.

Args: defaultSlot=(see snippet), arrow-buttons-on-hover=true

<oc-carousel-v1 oc-aria-label="carousel of placeholders" arrow-buttons-on-hover>
  <oc-placeholder-v1 interactive="true">ITEM 1</oc-placeholder-v1>
  <oc-placeholder-v1  interactive="true">ITEM 2</oc-placeholder-v1>
  <oc-placeholder-v1  interactive="true">ITEM 3</oc-placeholder-v1>
  <oc-placeholder-v1  interactive="true">ITEM 5</oc-placeholder-v1>
  <oc-placeholder-v1  interactive="true">ITEM 6</oc-placeholder-v1>
</oc-carousel-v1>

Hidden Arrow-Buttons

Story: components-carousel-variations--hidden-arrow-buttons · tags: components

The configuration with hidden arrow buttons.

Args: defaultSlot=(see snippet), hide-arrow-buttons=true

<oc-carousel-v1 oc-aria-label="carousel of placeholders" hide-arrow-buttons>
  <oc-placeholder-v1 interactive="true">ITEM 1</oc-placeholder-v1>
  <oc-placeholder-v1  interactive="true">ITEM 2</oc-placeholder-v1>
  <oc-placeholder-v1  interactive="true">ITEM 3</oc-placeholder-v1>
  <oc-placeholder-v1  interactive="true">ITEM 5</oc-placeholder-v1>
  <oc-placeholder-v1  interactive="true">ITEM 6</oc-placeholder-v1>
</oc-carousel-v1>

Few Items

Story: components-carousel-variations--few-items · tags: components

The configuration with only a few items.

Args: defaultSlot=(see snippet)

<oc-carousel-v1 oc-aria-label="carousel of placeholders">
  <oc-placeholder-v1 interactive="true">ITEM 1</oc-placeholder-v1>
  <oc-placeholder-v1  interactive="true">ITEM 2</oc-placeholder-v1>
  <oc-placeholder-v1  interactive="true">ITEM 3</oc-placeholder-v1>
</oc-carousel-v1>

Few Items Size 50

Story: components-carousel-variations--few-items-size-50 · tags: components

The configuration of size 50 with only a few items.

Args: defaultSlot=(see snippet), size=50

<oc-carousel-v1 oc-aria-label="carousel of placeholders" size="50">
  <oc-placeholder-v1 interactive="true">ITEM 1</oc-placeholder-v1>
  <oc-placeholder-v1  interactive="true">ITEM 2</oc-placeholder-v1>
</oc-carousel-v1>

Demo: In a sheet

Story: components-carousel-variations--demo-in-a-sheet · tags: components

The configuration within the oc-sheet-v1 component.

<oc-sheet-v1 id="carousel-in-sheet">
  <oc-carousel-v1>
    <oc-placeholder-v1 interactive="true">ITEM 1</oc-placeholder-v1>
    <oc-placeholder-v1 interactive="true">ITEM 2</oc-placeholder-v1>
    <oc-placeholder-v1 interactive="true">ITEM 3</oc-placeholder-v1>
    <oc-placeholder-v1 interactive="true">ITEM 4</oc-placeholder-v1>
    <oc-placeholder-v1 interactive="true">ITEM 5</oc-placeholder-v1>
    <oc-placeholder-v1 interactive="true">ITEM 6</oc-placeholder-v1>
    <oc-placeholder-v1 interactive="true">ITEM 7</oc-placeholder-v1>
    <oc-placeholder-v1 interactive="true">ITEM 8</oc-placeholder-v1>
  </oc-carousel-v1>
</oc-sheet-v1>

<p>
  <oc-button-v1 data-oc-sheet-v1-open data-oc-sheet-v1-open.id="carousel-in-sheet" size="50">
    Open sheet
  </oc-button-v1>
</p>

Story source (TypeScript, verbatim from Storybook)

{
  name: "Demo: In a sheet",
  parameters: {
    chromatic: {
      hideInChromatic: true
    },
    itest: {
      disableSnapshot: true
    }
  },
  render() {
    return html`
      <oc-sheet-v1 id="carousel-in-sheet">
        <oc-carousel-v1>
          <oc-placeholder-v1 interactive="true">ITEM 1</oc-placeholder-v1>
          <oc-placeholder-v1 interactive="true">ITEM 2</oc-placeholder-v1>
          <oc-placeholder-v1 interactive="true">ITEM 3</oc-placeholder-v1>
          <oc-placeholder-v1 interactive="true">ITEM 4</oc-placeholder-v1>
          <oc-placeholder-v1 interactive="true">ITEM 5</oc-placeholder-v1>
          <oc-placeholder-v1 interactive="true">ITEM 6</oc-placeholder-v1>
          <oc-placeholder-v1 interactive="true">ITEM 7</oc-placeholder-v1>
          <oc-placeholder-v1 interactive="true">ITEM 8</oc-placeholder-v1>
        </oc-carousel-v1>
      </oc-sheet-v1>

      <p>
        <oc-button-v1 data-oc-sheet-v1-open data-oc-sheet-v1-open.id="carousel-in-sheet" size="50">
          Open sheet
        </oc-button-v1>
      </p>
    `;
  }
}

Demo: multiple images

Story: components-carousel-variations--demo · tags: components

Demo showcasing the carousel with multiple images.

Args: defaultSlot=(see snippet)

<!-- Wrapper to limit the width & height-->
<div style="max-width: 400px; max-height: 300px">
  <!-- The component-->
  <oc-carousel-v1 oc-aria-label="carousel of placeholders"><oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    </oc-carousel-v1>
</div>

Story source (TypeScript, verbatim from Storybook)

{
  name: "Demo: multiple images",
  parameters: {
    chromatic: {
      hideInChromatic: true
    }
  },
  args: {
    defaultSlot: `<oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    `
  },
  render: ({
    defaultSlot,
    ...props
  }) => {
    return html`
      <!-- Wrapper to limit the width & height-->
      <div style="max-width: 400px; max-height: 300px">
        <!-- The component-->
        <oc-carousel-v1 ${spread(props)}>${unsafeHTML(defaultSlot)}</oc-carousel-v1>
      </div>
    `;
  }
}

Demo: Move-Method

Story: components-carousel-variations--demo-move-method · tags: components

Demo showcasing the movement of the stage programmatically.

Args: defaultSlot=(see snippet)

<!-- Wrapper to limit the width & height-->
<div style="max-width: 400px; max-height: 300px">
  <!-- The component-->
  <oc-carousel-v1 oc-aria-label="carousel of placeholders"><oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    </oc-carousel-v1>
</div>
<br />
<br />
<p>
  <oc-button-v1 size="50">Move stage to slide 5</oc-button-v1>
  <br />
  <br />
  <textarea
    style="width: 100%; height: 4rem; resize:none; font-family: Monospace; border:0;"
    aria-label="example"
    disabled
  >
  const moveMyCarousel = (myCarousel) => {
    myCarousel.moveTo(5);
  }
  </textarea>
</p>
<br />
<br />
<p>
  <oc-button-v1 size="50">Move stage to slide 5 (reduced motion)</oc-button-v1>
  <br />
  <br />
  <textarea
    style="width: 100%; height: 4rem; resize:none; font-family: Monospace; border:0;"
    aria-label="example"
    disabled
  >
  const moveMyCarousel = (myCarousel) => {
    myCarousel.moveTo(5, { reducedMotion: true });
  }
  </textarea>
</p>

<script>
  (() => {
    const [moveStage, moveStageReducedMotion] = document.getElementsByTagName("oc-button-v1");

    moveStage.addEventListener("click", () => {
      document.querySelector("oc-carousel-v1").moveTo(5);
    });

    moveStageReducedMotion.addEventListener("click", () => {
      document.querySelector("oc-carousel-v1").moveTo(5, { reducedMotion: true });
    });
  })();
</script>

Story source (TypeScript, verbatim from Storybook)

{
  name: "Demo: Move-Method",
  parameters: {
    chromatic: {
      hideInChromatic: true,
      disableSnapshot: true
    }
  },
  args: {
    defaultSlot: `<oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    <oc-placeholder-v1  variant="image" width="100%" height="100%" style="height: 300px" interactive="true"></oc-placeholder-v1>
    `
  },
  render: ({
    defaultSlot,
    ...props
  }) => {
    return html`
      <!-- Wrapper to limit the width & height-->
      <div style="max-width: 400px; max-height: 300px">
        <!-- The component-->
        <oc-carousel-v1 ${spread(props)}>${unsafeHTML(defaultSlot)}</oc-carousel-v1>
      </div>
      <br />
      <br />
      <p>
        <oc-button-v1 size="50">Move stage to slide 5</oc-button-v1>
        <br />
        <br />
        <textarea
          style="width: 100%; height: 4rem; resize:none; font-family: Monospace; border:0;"
          aria-label="example"
          disabled
        >
        const moveMyCarousel = (myCarousel) => {
          myCarousel.moveTo(5);
        }
        </textarea>
      </p>
      <br />
      <br />
      <p>
        <oc-button-v1 size="50">Move stage to slide 5 (reduced motion)</oc-button-v1>
        <br />
        <br />
        <textarea
          style="width: 100%; height: 4rem; resize:none; font-family: Monospace; border:0;"
          aria-label="example"
          disabled
        >
        const moveMyCarousel = (myCarousel) => {
          myCarousel.moveTo(5, { reducedMotion: true });
        }
        </textarea>
      </p>

      <script>
        (() => {
          const [moveStage, moveStageReducedMotion] = document.getElementsByTagName("oc-button-v1");

          moveStage.addEventListener("click", () => {
            document.querySelector("oc-carousel-v1").moveTo(5);
          });

          moveStageReducedMotion.addEventListener("click", () => {
            document.querySelector("oc-carousel-v1").moveTo(5, { reducedMotion: true });
          });
        })();
      </script>
    `;
  }
}

Demo: Multiple Carousels

Story: components-carousel-variations--demo-multiple-carousels · tags: components

A Demo of multiple carousels.

<h1>List of Carousels</h1>

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis facilis nobis nisi odit
  maiores libero assumenda repudiandae. Repudiandae sapiente odit id. Voluptas dolores
  repellendus sit corrupti ab dolor distinctio, expedita id quod suscipit. Saepe culpa libero
  laborum vel quos illum officia, fuga corporis dolor excepturi! Excepturi, nobis. Pariatur
  itaque voluptas tenetur qui aut eveniet, aliquam numquam quia distinctio dolor ducimus quod
  optio quam soluta expedita eligendi quae, ipsa culpa. Praesentium autem impedit,
  necessitatibus quos porro cupiditate ipsam eveniet nisi illo. Sequi molestias magnam
  exercitationem repudiandae maiores dolor itaque earum necessitatibus facere. Officiis
  dolorem, hic modi, maxime sint sapiente, libero quas impedit earum quibusdam rerum minus
  atque doloribus! Accusamus impedit rerum ea pariatur sunt ex iure consequatur! Quisquam
  maiores doloremque, sit vero, sint a ullam eum possimus dicta voluptatem numquam sequi
  eveniet dolorem recusandae ratione odio! Sint reprehenderit earum quas fugit dolorum
  laudantium maiores officiis necessitatibus harum? Exercitationem provident dolores soluta.
  Rerum minus hic asperiores nesciunt, error quae blanditiis expedita ducimus facere provident
  reprehenderit, ex autem tempore praesentium? Culpa blanditiis repellendus earum qui? Atque
  dolorem, impedit dignissimos non pariatur blanditiis porro nisi doloribus? Fugit recusandae
  qui dignissimos, natus architecto sapiente sunt laudantium tenetur temporibus iste totam
  placeat facilis facere quia doloribus.
</p>

<oc-carousel-v1 id="carousel-1">
  <oc-placeholder-v1 interactive="true">ITEM 1</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true" style="width: 1500px">ITEM 2</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true">ITEM 3</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true">ITEM 4</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true" style="width: 100px">ITEM 5</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true">ITEM 6</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true">ITEM 7</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true">ITEM 8</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true">ITEM 9</oc-placeholder-v1>
</oc-carousel-v1>
<div style="margin-top: 32px"></div>
<oc-carousel-v1 id="carousel-2">
  <oc-placeholder-v1 interactive="true">ITEM 1</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true" style="width: 1500px">ITEM 2</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true">ITEM 3</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true">ITEM 4</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true" style="width: 100px">ITEM 5</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true">ITEM 6</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true">ITEM 7</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true">ITEM 8</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true">ITEM 9</oc-placeholder-v1>
</oc-carousel-v1>
<div style="margin-top: 32px"></div>

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis facilis nobis nisi odit
  maiores libero assumenda repudiandae. Repudiandae sapiente odit id. Voluptas dolores
  repellendus sit corrupti ab dolor distinctio, expedita id quod suscipit. Saepe culpa libero
  laborum vel quos illum officia, fuga corporis dolor excepturi! Excepturi, nobis. Pariatur
  itaque voluptas tenetur qui aut eveniet, aliquam numquam quia distinctio dolor ducimus quod
  optio quam soluta expedita eligendi quae, ipsa culpa. Praesentium autem impedit,
  necessitatibus quos porro cupiditate ipsam eveniet nisi illo. Sequi molestias magnam
  exercitationem repudiandae maiores dolor itaque earum necessitatibus facere. Officiis
  dolorem, hic modi, maxime sint sapiente, libero quas impedit earum quibusdam rerum minus
  atque doloribus! Accusamus impedit rerum ea pariatur sunt ex iure consequatur! Quisquam
  maiores doloremque, sit vero, sint a ullam eum possimus dicta voluptatem numquam sequi
  eveniet dolorem recusandae ratione odio! Sint reprehenderit earum quas fugit dolorum
  laudantium maiores officiis necessitatibus harum? Exercitationem provident dolores soluta.
  Rerum minus hic asperiores nesciunt, error quae blanditiis expedita ducimus facere provident
  reprehenderit, ex autem tempore praesentium? Culpa blanditiis repellendus earum qui? Atque
  dolorem, impedit dignissimos non pariatur blanditiis porro nisi doloribus? Fugit recusandae
  qui dignissimos, natus architecto sapiente sunt laudantium tenetur temporibus iste totam
  placeat facilis facere quia doloribus.
</p>

<oc-carousel-v1 id="carousel-3">
  <oc-placeholder-v1 interactive="true">ITEM 1</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true" style="width: 1500px">ITEM 2</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true">ITEM 3</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true">ITEM 4</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true" style="width: 100px">ITEM 5</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true">ITEM 6</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true">ITEM 7</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true">ITEM 8</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true">ITEM 9</oc-placeholder-v1>
</oc-carousel-v1>
<div style="margin-top: 32px"></div>
<oc-carousel-v1 id="carousel-4">
  <oc-placeholder-v1 interactive="true">ITEM 1</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true" style="width: 1500px">ITEM 2</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true">ITEM 3</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true">ITEM 4</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true" style="width: 100px">ITEM 5</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true">ITEM 6</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true">ITEM 7</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true">ITEM 8</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true">ITEM 9</oc-placeholder-v1>
</oc-carousel-v1>
<div style="margin-top: 32px"></div>
<oc-carousel-v1 id="carousel-5">
  <oc-placeholder-v1 interactive="true">ITEM 1</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true" style="width: 1500px">ITEM 2</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true">ITEM 3</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true">ITEM 4</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true" style="width: 100px">ITEM 5</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true">ITEM 6</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true">ITEM 7</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true">ITEM 8</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true">ITEM 9</oc-placeholder-v1>
</oc-carousel-v1>

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis facilis nobis nisi odit
  maiores libero assumenda repudiandae. Repudiandae sapiente odit id. Voluptas dolores
  repellendus sit corrupti ab dolor distinctio, expedita id quod suscipit. Saepe culpa libero
  laborum vel quos illum officia, fuga corporis dolor excepturi! Excepturi, nobis. Pariatur
  itaque voluptas tenetur qui aut eveniet, aliquam numquam quia distinctio dolor ducimus quod
  optio quam soluta expedita eligendi quae, ipsa culpa. Praesentium autem impedit,
  necessitatibus quos porro cupiditate ipsam eveniet nisi illo. Sequi molestias magnam
  exercitationem repudiandae maiores dolor itaque earum necessitatibus facere. Officiis
  dolorem, hic modi, maxime sint sapiente, libero quas impedit earum quibusdam rerum minus
  atque doloribus! Accusamus impedit rerum ea pariatur sunt ex iure consequatur! Quisquam
  maiores doloremque, sit vero, sint a ullam eum possimus dicta voluptatem numquam sequi
  eveniet dolorem recusandae ratione odio! Sint reprehenderit earum quas fugit dolorum
  laudantium maiores officiis necessitatibus harum? Exercitationem provident dolores soluta.
  Rerum minus hic asperiores nesciunt, error quae blanditiis expedita ducimus facere provident
  reprehenderit, ex autem tempore praesentium? Culpa blanditiis repellendus earum qui? Atque
  dolorem, impedit dignissimos non pariatur blanditiis porro nisi doloribus? Fugit recusandae
  qui dignissimos, natus architecto sapiente sunt laudantium tenetur temporibus iste totam
  placeat facilis facere quia doloribus.
</p>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis facilis nobis nisi odit
  maiores libero assumenda repudiandae. Repudiandae sapiente odit id. Voluptas dolores
  repellendus sit corrupti ab dolor distinctio, expedita id quod suscipit. Saepe culpa libero
  laborum vel quos illum officia, fuga corporis dolor excepturi! Excepturi, nobis. Pariatur
  itaque voluptas tenetur qui aut eveniet, aliquam numquam quia distinctio dolor ducimus quod
  optio quam soluta expedita eligendi quae, ipsa culpa. Praesentium autem impedit,
  necessitatibus quos porro cupiditate ipsam eveniet nisi illo. Sequi molestias magnam
  exercitationem repudiandae maiores dolor itaque earum necessitatibus facere. Officiis
  dolorem, hic modi, maxime sint sapiente, libero quas impedit earum quibusdam rerum minus
  atque doloribus! Accusamus impedit rerum ea pariatur sunt ex iure consequatur! Quisquam
  maiores doloremque, sit vero, sint a ullam eum possimus dicta voluptatem numquam sequi
  eveniet dolorem recusandae ratione odio! Sint reprehenderit earum quas fugit dolorum
  laudantium maiores officiis necessitatibus harum? Exercitationem provident dolores soluta.
  Rerum minus hic asperiores nesciunt, error quae blanditiis expedita ducimus facere provident
  reprehenderit, ex autem tempore praesentium? Culpa blanditiis repellendus earum qui? Atque
  dolorem, impedit dignissimos non pariatur blanditiis porro nisi doloribus? Fugit recusandae
  qui dignissimos, natus architecto sapiente sunt laudantium tenetur temporibus iste totam
  placeat facilis facere quia doloribus.
</p>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis facilis nobis nisi odit
  maiores libero assumenda repudiandae. Repudiandae sapiente odit id. Voluptas dolores
  repellendus sit corrupti ab dolor distinctio, expedita id quod suscipit. Saepe culpa libero
  laborum vel quos illum officia, fuga corporis dolor excepturi! Excepturi, nobis. Pariatur
  itaque voluptas tenetur qui aut eveniet, aliquam numquam quia distinctio dolor ducimus quod
  optio quam soluta expedita eligendi quae, ipsa culpa. Praesentium autem impedit,
  necessitatibus quos porro cupiditate ipsam eveniet nisi illo. Sequi molestias magnam
  exercitationem repudiandae maiores dolor itaque earum necessitatibus facere. Officiis
  dolorem, hic modi, maxime sint sapiente, libero quas impedit earum quibusdam rerum minus
  atque doloribus! Accusamus impedit rerum ea pariatur sunt ex iure consequatur! Quisquam
  maiores doloremque, sit vero, sint a ullam eum possimus dicta voluptatem numquam sequi
  eveniet dolorem recusandae ratione odio! Sint reprehenderit earum quas fugit dolorum
  laudantium maiores officiis necessitatibus harum? Exercitationem provident dolores soluta.
  Rerum minus hic asperiores nesciunt, error quae blanditiis expedita ducimus facere provident
  reprehenderit, ex autem tempore praesentium? Culpa blanditiis repellendus earum qui? Atque
  dolorem, impedit dignissimos non pariatur blanditiis porro nisi doloribus? Fugit recusandae
  qui dignissimos, natus architecto sapiente sunt laudantium tenetur temporibus iste totam
  placeat facilis facere quia doloribus.
</p>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis facilis nobis nisi odit
  maiores libero assumenda repudiandae. Repudiandae sapiente odit id. Voluptas dolores
  repellendus sit corrupti ab dolor distinctio, expedita id quod suscipit. Saepe culpa libero
  laborum vel quos illum officia, fuga corporis dolor excepturi! Excepturi, nobis. Pariatur
  itaque voluptas tenetur qui aut eveniet, aliquam numquam quia distinctio dolor ducimus quod
  optio quam soluta expedita eligendi quae, ipsa culpa. Praesentium autem impedit,
  necessitatibus quos porro cupiditate ipsam eveniet nisi illo. Sequi molestias magnam
  exercitationem repudiandae maiores dolor itaque earum necessitatibus facere. Officiis
  dolorem, hic modi, maxime sint sapiente, libero quas impedit earum quibusdam rerum minus
  atque doloribus! Accusamus impedit rerum ea pariatur sunt ex iure consequatur! Quisquam
  maiores doloremque, sit vero, sint a ullam eum possimus dicta voluptatem numquam sequi
  eveniet dolorem recusandae ratione odio! Sint reprehenderit earum quas fugit dolorum
  laudantium maiores officiis necessitatibus harum? Exercitationem provident dolores soluta.
  Rerum minus hic asperiores nesciunt, error quae blanditiis expedita ducimus facere provident
  reprehenderit, ex autem tempore praesentium? Culpa blanditiis repellendus earum qui? Atque
  dolorem, impedit dignissimos non pariatur blanditiis porro nisi doloribus? Fugit recusandae
  qui dignissimos, natus architecto sapiente sunt laudantium tenetur temporibus iste totam
  placeat facilis facere quia doloribus.
</p>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis facilis nobis nisi odit
  maiores libero assumenda repudiandae. Repudiandae sapiente odit id. Voluptas dolores
  repellendus sit corrupti ab dolor distinctio, expedita id quod suscipit. Saepe culpa libero
  laborum vel quos illum officia, fuga corporis dolor excepturi! Excepturi, nobis. Pariatur
  itaque voluptas tenetur qui aut eveniet, aliquam numquam quia distinctio dolor ducimus quod
  optio quam soluta expedita eligendi quae, ipsa culpa. Praesentium autem impedit,
  necessitatibus quos porro cupiditate ipsam eveniet nisi illo. Sequi molestias magnam
  exercitationem repudiandae maiores dolor itaque earum necessitatibus facere. Officiis
  dolorem, hic modi, maxime sint sapiente, libero quas impedit earum quibusdam rerum minus
  atque doloribus! Accusamus impedit rerum ea pariatur sunt ex iure consequatur! Quisquam
  maiores doloremque, sit vero, sint a ullam eum possimus dicta voluptatem numquam sequi
  eveniet dolorem recusandae ratione odio! Sint reprehenderit earum quas fugit dolorum
  laudantium maiores officiis necessitatibus harum? Exercitationem provident dolores soluta.
  Rerum minus hic asperiores nesciunt, error quae blanditiis expedita ducimus facere provident
  reprehenderit, ex autem tempore praesentium? Culpa blanditiis repellendus earum qui? Atque
  dolorem, impedit dignissimos non pariatur blanditiis porro nisi doloribus? Fugit recusandae
  qui dignissimos, natus architecto sapiente sunt laudantium tenetur temporibus iste totam
  placeat facilis facere quia doloribus.
</p>
<oc-carousel-v1 id="carousel-6">
  <oc-placeholder-v1 interactive="true">ITEM 1</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true" style="width: 1500px">ITEM 2</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true">ITEM 3</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true">ITEM 4</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true" style="width: 100px">ITEM 5</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true">ITEM 6</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true">ITEM 7</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true">ITEM 8</oc-placeholder-v1>
  <oc-placeholder-v1 interactive="true">ITEM 9</oc-placeholder-v1>
</oc-carousel-v1>

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis facilis nobis nisi odit
  maiores libero assumenda repudiandae. Repudiandae sapiente odit id. Voluptas dolores
  repellendus sit corrupti ab dolor distinctio, expedita id quod suscipit. Saepe culpa libero
  laborum vel quos illum officia, fuga corporis dolor excepturi! Excepturi, nobis. Pariatur
  itaque voluptas tenetur qui aut eveniet, aliquam numquam quia distinctio dolor ducimus quod
  optio quam soluta expedita eligendi quae, ipsa culpa. Praesentium autem impedit,
  necessitatibus quos porro cupiditate ipsam eveniet nisi illo. Sequi molestias magnam
  exercitationem repudiandae maiores dolor itaque earum necessitatibus facere. Officiis
  dolorem, hic modi, maxime sint sapiente, libero quas impedit earum quibusdam rerum minus
  atque doloribus! Accusamus impedit rerum ea pariatur sunt ex iure consequatur! Quisquam
  maiores doloremque, sit vero, sint a ullam eum possimus dicta voluptatem numquam sequi
  eveniet dolorem recusandae ratione odio! Sint reprehenderit earum quas fugit dolorum
  laudantium maiores officiis necessitatibus harum? Exercitationem provident dolores soluta.
  Rerum minus hic asperiores nesciunt, error quae blanditiis expedita ducimus facere provident
  reprehenderit, ex autem tempore praesentium? Culpa blanditiis repellendus earum qui? Atque
  dolorem, impedit dignissimos non pariatur blanditiis porro nisi doloribus? Fugit recusandae
  qui dignissimos, natus architecto sapiente sunt laudantium tenetur temporibus iste totam
  placeat facilis facere quia doloribus.
</p>

Story source (TypeScript, verbatim from Storybook)

{
  name: "Demo: Multiple Carousels",
  parameters: {
    chromatic: {
      hideInChromatic: true
    }
  },
  render: () => {
    return html`
      <h1>List of Carousels</h1>

      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis facilis nobis nisi odit
        maiores libero assumenda repudiandae. Repudiandae sapiente odit id. Voluptas dolores
        repellendus sit corrupti ab dolor distinctio, expedita id quod suscipit. Saepe culpa libero
        laborum vel quos illum officia, fuga corporis dolor excepturi! Excepturi, nobis. Pariatur
        itaque voluptas tenetur qui aut eveniet, aliquam numquam quia distinctio dolor ducimus quod
        optio quam soluta expedita eligendi quae, ipsa culpa. Praesentium autem impedit,
        necessitatibus quos porro cupiditate ipsam eveniet nisi illo. Sequi molestias magnam
        exercitationem repudiandae maiores dolor itaque earum necessitatibus facere. Officiis
        dolorem, hic modi, maxime sint sapiente, libero quas impedit earum quibusdam rerum minus
        atque doloribus! Accusamus impedit rerum ea pariatur sunt ex iure consequatur! Quisquam
        maiores doloremque, sit vero, sint a ullam eum possimus dicta voluptatem numquam sequi
        eveniet dolorem recusandae ratione odio! Sint reprehenderit earum quas fugit dolorum
        laudantium maiores officiis necessitatibus harum? Exercitationem provident dolores soluta.
        Rerum minus hic asperiores nesciunt, error quae blanditiis expedita ducimus facere provident
        reprehenderit, ex autem tempore praesentium? Culpa blanditiis repellendus earum qui? Atque
        dolorem, impedit dignissimos non pariatur blanditiis porro nisi doloribus? Fugit recusandae
        qui dignissimos, natus architecto sapiente sunt laudantium tenetur temporibus iste totam
        placeat facilis facere quia doloribus.
      </p>

      <oc-carousel-v1 id="carousel-1">
        <oc-placeholder-v1 interactive="true">ITEM 1</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true" style="width: 1500px">ITEM 2</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 3</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 4</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true" style="width: 100px">ITEM 5</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 6</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 7</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 8</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 9</oc-placeholder-v1>
      </oc-carousel-v1>
      <div style="margin-top: 32px"></div>
      <oc-carousel-v1 id="carousel-2">
        <oc-placeholder-v1 interactive="true">ITEM 1</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true" style="width: 1500px">ITEM 2</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 3</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 4</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true" style="width: 100px">ITEM 5</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 6</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 7</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 8</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 9</oc-placeholder-v1>
      </oc-carousel-v1>
      <div style="margin-top: 32px"></div>

      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis facilis nobis nisi odit
        maiores libero assumenda repudiandae. Repudiandae sapiente odit id. Voluptas dolores
        repellendus sit corrupti ab dolor distinctio, expedita id quod suscipit. Saepe culpa libero
        laborum vel quos illum officia, fuga corporis dolor excepturi! Excepturi, nobis. Pariatur
        itaque voluptas tenetur qui aut eveniet, aliquam numquam quia distinctio dolor ducimus quod
        optio quam soluta expedita eligendi quae, ipsa culpa. Praesentium autem impedit,
        necessitatibus quos porro cupiditate ipsam eveniet nisi illo. Sequi molestias magnam
        exercitationem repudiandae maiores dolor itaque earum necessitatibus facere. Officiis
        dolorem, hic modi, maxime sint sapiente, libero quas impedit earum quibusdam rerum minus
        atque doloribus! Accusamus impedit rerum ea pariatur sunt ex iure consequatur! Quisquam
        maiores doloremque, sit vero, sint a ullam eum possimus dicta voluptatem numquam sequi
        eveniet dolorem recusandae ratione odio! Sint reprehenderit earum quas fugit dolorum
        laudantium maiores officiis necessitatibus harum? Exercitationem provident dolores soluta.
        Rerum minus hic asperiores nesciunt, error quae blanditiis expedita ducimus facere provident
        reprehenderit, ex autem tempore praesentium? Culpa blanditiis repellendus earum qui? Atque
        dolorem, impedit dignissimos non pariatur blanditiis porro nisi doloribus? Fugit recusandae
        qui dignissimos, natus architecto sapiente sunt laudantium tenetur temporibus iste totam
        placeat facilis facere quia doloribus.
      </p>

      <oc-carousel-v1 id="carousel-3">
        <oc-placeholder-v1 interactive="true">ITEM 1</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true" style="width: 1500px">ITEM 2</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 3</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 4</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true" style="width: 100px">ITEM 5</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 6</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 7</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 8</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 9</oc-placeholder-v1>
      </oc-carousel-v1>
      <div style="margin-top: 32px"></div>
      <oc-carousel-v1 id="carousel-4">
        <oc-placeholder-v1 interactive="true">ITEM 1</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true" style="width: 1500px">ITEM 2</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 3</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 4</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true" style="width: 100px">ITEM 5</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 6</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 7</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 8</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 9</oc-placeholder-v1>
      </oc-carousel-v1>
      <div style="margin-top: 32px"></div>
      <oc-carousel-v1 id="carousel-5">
        <oc-placeholder-v1 interactive="true">ITEM 1</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true" style="width: 1500px">ITEM 2</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 3</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 4</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true" style="width: 100px">ITEM 5</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 6</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 7</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 8</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 9</oc-placeholder-v1>
      </oc-carousel-v1>

      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis facilis nobis nisi odit
        maiores libero assumenda repudiandae. Repudiandae sapiente odit id. Voluptas dolores
        repellendus sit corrupti ab dolor distinctio, expedita id quod suscipit. Saepe culpa libero
        laborum vel quos illum officia, fuga corporis dolor excepturi! Excepturi, nobis. Pariatur
        itaque voluptas tenetur qui aut eveniet, aliquam numquam quia distinctio dolor ducimus quod
        optio quam soluta expedita eligendi quae, ipsa culpa. Praesentium autem impedit,
        necessitatibus quos porro cupiditate ipsam eveniet nisi illo. Sequi molestias magnam
        exercitationem repudiandae maiores dolor itaque earum necessitatibus facere. Officiis
        dolorem, hic modi, maxime sint sapiente, libero quas impedit earum quibusdam rerum minus
        atque doloribus! Accusamus impedit rerum ea pariatur sunt ex iure consequatur! Quisquam
        maiores doloremque, sit vero, sint a ullam eum possimus dicta voluptatem numquam sequi
        eveniet dolorem recusandae ratione odio! Sint reprehenderit earum quas fugit dolorum
        laudantium maiores officiis necessitatibus harum? Exercitationem provident dolores soluta.
        Rerum minus hic asperiores nesciunt, error quae blanditiis expedita ducimus facere provident
        reprehenderit, ex autem tempore praesentium? Culpa blanditiis repellendus earum qui? Atque
        dolorem, impedit dignissimos non pariatur blanditiis porro nisi doloribus? Fugit recusandae
        qui dignissimos, natus architecto sapiente sunt laudantium tenetur temporibus iste totam
        placeat facilis facere quia doloribus.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis facilis nobis nisi odit
        maiores libero assumenda repudiandae. Repudiandae sapiente odit id. Voluptas dolores
        repellendus sit corrupti ab dolor distinctio, expedita id quod suscipit. Saepe culpa libero
        laborum vel quos illum officia, fuga corporis dolor excepturi! Excepturi, nobis. Pariatur
        itaque voluptas tenetur qui aut eveniet, aliquam numquam quia distinctio dolor ducimus quod
        optio quam soluta expedita eligendi quae, ipsa culpa. Praesentium autem impedit,
        necessitatibus quos porro cupiditate ipsam eveniet nisi illo. Sequi molestias magnam
        exercitationem repudiandae maiores dolor itaque earum necessitatibus facere. Officiis
        dolorem, hic modi, maxime sint sapiente, libero quas impedit earum quibusdam rerum minus
        atque doloribus! Accusamus impedit rerum ea pariatur sunt ex iure consequatur! Quisquam
        maiores doloremque, sit vero, sint a ullam eum possimus dicta voluptatem numquam sequi
        eveniet dolorem recusandae ratione odio! Sint reprehenderit earum quas fugit dolorum
        laudantium maiores officiis necessitatibus harum? Exercitationem provident dolores soluta.
        Rerum minus hic asperiores nesciunt, error quae blanditiis expedita ducimus facere provident
        reprehenderit, ex autem tempore praesentium? Culpa blanditiis repellendus earum qui? Atque
        dolorem, impedit dignissimos non pariatur blanditiis porro nisi doloribus? Fugit recusandae
        qui dignissimos, natus architecto sapiente sunt laudantium tenetur temporibus iste totam
        placeat facilis facere quia doloribus.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis facilis nobis nisi odit
        maiores libero assumenda repudiandae. Repudiandae sapiente odit id. Voluptas dolores
        repellendus sit corrupti ab dolor distinctio, expedita id quod suscipit. Saepe culpa libero
        laborum vel quos illum officia, fuga corporis dolor excepturi! Excepturi, nobis. Pariatur
        itaque voluptas tenetur qui aut eveniet, aliquam numquam quia distinctio dolor ducimus quod
        optio quam soluta expedita eligendi quae, ipsa culpa. Praesentium autem impedit,
        necessitatibus quos porro cupiditate ipsam eveniet nisi illo. Sequi molestias magnam
        exercitationem repudiandae maiores dolor itaque earum necessitatibus facere. Officiis
        dolorem, hic modi, maxime sint sapiente, libero quas impedit earum quibusdam rerum minus
        atque doloribus! Accusamus impedit rerum ea pariatur sunt ex iure consequatur! Quisquam
        maiores doloremque, sit vero, sint a ullam eum possimus dicta voluptatem numquam sequi
        eveniet dolorem recusandae ratione odio! Sint reprehenderit earum quas fugit dolorum
        laudantium maiores officiis necessitatibus harum? Exercitationem provident dolores soluta.
        Rerum minus hic asperiores nesciunt, error quae blanditiis expedita ducimus facere provident
        reprehenderit, ex autem tempore praesentium? Culpa blanditiis repellendus earum qui? Atque
        dolorem, impedit dignissimos non pariatur blanditiis porro nisi doloribus? Fugit recusandae
        qui dignissimos, natus architecto sapiente sunt laudantium tenetur temporibus iste totam
        placeat facilis facere quia doloribus.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis facilis nobis nisi odit
        maiores libero assumenda repudiandae. Repudiandae sapiente odit id. Voluptas dolores
        repellendus sit corrupti ab dolor distinctio, expedita id quod suscipit. Saepe culpa libero
        laborum vel quos illum officia, fuga corporis dolor excepturi! Excepturi, nobis. Pariatur
        itaque voluptas tenetur qui aut eveniet, aliquam numquam quia distinctio dolor ducimus quod
        optio quam soluta expedita eligendi quae, ipsa culpa. Praesentium autem impedit,
        necessitatibus quos porro cupiditate ipsam eveniet nisi illo. Sequi molestias magnam
        exercitationem repudiandae maiores dolor itaque earum necessitatibus facere. Officiis
        dolorem, hic modi, maxime sint sapiente, libero quas impedit earum quibusdam rerum minus
        atque doloribus! Accusamus impedit rerum ea pariatur sunt ex iure consequatur! Quisquam
        maiores doloremque, sit vero, sint a ullam eum possimus dicta voluptatem numquam sequi
        eveniet dolorem recusandae ratione odio! Sint reprehenderit earum quas fugit dolorum
        laudantium maiores officiis necessitatibus harum? Exercitationem provident dolores soluta.
        Rerum minus hic asperiores nesciunt, error quae blanditiis expedita ducimus facere provident
        reprehenderit, ex autem tempore praesentium? Culpa blanditiis repellendus earum qui? Atque
        dolorem, impedit dignissimos non pariatur blanditiis porro nisi doloribus? Fugit recusandae
        qui dignissimos, natus architecto sapiente sunt laudantium tenetur temporibus iste totam
        placeat facilis facere quia doloribus.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis facilis nobis nisi odit
        maiores libero assumenda repudiandae. Repudiandae sapiente odit id. Voluptas dolores
        repellendus sit corrupti ab dolor distinctio, expedita id quod suscipit. Saepe culpa libero
        laborum vel quos illum officia, fuga corporis dolor excepturi! Excepturi, nobis. Pariatur
        itaque voluptas tenetur qui aut eveniet, aliquam numquam quia distinctio dolor ducimus quod
        optio quam soluta expedita eligendi quae, ipsa culpa. Praesentium autem impedit,
        necessitatibus quos porro cupiditate ipsam eveniet nisi illo. Sequi molestias magnam
        exercitationem repudiandae maiores dolor itaque earum necessitatibus facere. Officiis
        dolorem, hic modi, maxime sint sapiente, libero quas impedit earum quibusdam rerum minus
        atque doloribus! Accusamus impedit rerum ea pariatur sunt ex iure consequatur! Quisquam
        maiores doloremque, sit vero, sint a ullam eum possimus dicta voluptatem numquam sequi
        eveniet dolorem recusandae ratione odio! Sint reprehenderit earum quas fugit dolorum
        laudantium maiores officiis necessitatibus harum? Exercitationem provident dolores soluta.
        Rerum minus hic asperiores nesciunt, error quae blanditiis expedita ducimus facere provident
        reprehenderit, ex autem tempore praesentium? Culpa blanditiis repellendus earum qui? Atque
        dolorem, impedit dignissimos non pariatur blanditiis porro nisi doloribus? Fugit recusandae
        qui dignissimos, natus architecto sapiente sunt laudantium tenetur temporibus iste totam
        placeat facilis facere quia doloribus.
      </p>
      <oc-carousel-v1 id="carousel-6">
        <oc-placeholder-v1 interactive="true">ITEM 1</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true" style="width: 1500px">ITEM 2</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 3</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 4</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true" style="width: 100px">ITEM 5</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 6</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 7</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 8</oc-placeholder-v1>
        <oc-placeholder-v1 interactive="true">ITEM 9</oc-placeholder-v1>
      </oc-carousel-v1>

      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis facilis nobis nisi odit
        maiores libero assumenda repudiandae. Repudiandae sapiente odit id. Voluptas dolores
        repellendus sit corrupti ab dolor distinctio, expedita id quod suscipit. Saepe culpa libero
        laborum vel quos illum officia, fuga corporis dolor excepturi! Excepturi, nobis. Pariatur
        itaque voluptas tenetur qui aut eveniet, aliquam numquam quia distinctio dolor ducimus quod
        optio quam soluta expedita eligendi quae, ipsa culpa. Praesentium autem impedit,
        necessitatibus quos porro cupiditate ipsam eveniet nisi illo. Sequi molestias magnam
        exercitationem repudiandae maiores dolor itaque earum necessitatibus facere. Officiis
        dolorem, hic modi, maxime sint sapiente, libero quas impedit earum quibusdam rerum minus
        atque doloribus! Accusamus impedit rerum ea pariatur sunt ex iure consequatur! Quisquam
        maiores doloremque, sit vero, sint a ullam eum possimus dicta voluptatem numquam sequi
        eveniet dolorem recusandae ratione odio! Sint reprehenderit earum quas fugit dolorum
        laudantium maiores officiis necessitatibus harum? Exercitationem provident dolores soluta.
        Rerum minus hic asperiores nesciunt, error quae blanditiis expedita ducimus facere provident
        reprehenderit, ex autem tempore praesentium? Culpa blanditiis repellendus earum qui? Atque
        dolorem, impedit dignissimos non pariatur blanditiis porro nisi doloribus? Fugit recusandae
        qui dignissimos, natus architecto sapiente sunt laudantium tenetur temporibus iste totam
        placeat facilis facere quia doloribus.
      </p>
    `;
  }
}

Interaction tests (CarouselV1.interactions.stories.ts)

Interaction test stories (automated tests, not usage patterns).

Move Carousel

Story: components-carousel-interaction-tests--move-carousel · tags: play-fn

Args: defaultSlot=(see snippet)

Story source (TypeScript, verbatim from Storybook)

{
  args: {
    defaultSlot: `${new Array(5).fill(`<div tabindex="0">
              Content
            </div>
          `).join("")}`
  },
  parameters: {
    chromatic: {
      disableSnapshot: true
    }
  },
  play: async ({
    canvasElement
  }) => {
    const carouselElement = canvasElement.getElementsByTagName("oc-carousel-v1")[0]!;
    const prevButton = carouselElement.shadowRoot!.querySelector(".arrow-button--left")!;
    const nextButton = carouselElement.shadowRoot!.querySelector(".arrow-button--right")!;
    await waitFor(() => [expect(prevButton, "left button should not be visible initially").not.toBeVisible(), expect(nextButton, "right button should be visible initially").toBeVisible()]);
    await click(nextButton as HTMLElement);
    await waitFor(() => [expect(prevButton, "left button should not be visible after scroll").toBeVisible(), expect(nextButton, "right button should not be still visible after scroll").toBeVisible()]);
  }
}

Single Slide

Story: components-carousel-interaction-tests--single-slide · tags: play-fn

Args: defaultSlot=<div tabindex="0"> Content </div>

Story source (TypeScript, verbatim from Storybook)

{
  args: {
    defaultSlot: `${new Array(1).fill(`<div tabindex="0">
              Content
            </div>
          `).join("")}`
  },
  parameters: {
    chromatic: {
      disableSnapshot: true
    }
  },
  play: async ({
    canvasElement
  }) => {
    const carouselElement = canvasElement.getElementsByTagName("oc-carousel-v1")[0]!;
    const prevButton = carouselElement.shadowRoot!.querySelector(".arrow-button--left")!;
    const nextButton = carouselElement.shadowRoot!.querySelector(".arrow-button--right")!;
    await macrotasks(100);
    await expect(prevButton).toHaveClass("arrow-button--hidden");
    await expect(nextButton).toHaveClass("arrow-button--hidden");
    await expect(carouselElement.shadowRoot!.querySelector(".paginationdots-container__wrapper")).toBeNull();
  }
}

Move On Pagination Dots Click

Story: components-carousel-interaction-tests--move-on-pagination-dots-click · tags: play-fn

Args: defaultSlot=(see snippet)

Story source (TypeScript, verbatim from Storybook)

{
  args: {
    defaultSlot: `${new Array(4).fill(`<div tabindex="0">
              Content
            </div>
          `).join("")}`
  },
  play: async ({
    canvasElement
  }) => {
    const carouselElement = canvasElement.getElementsByTagName("oc-carousel-v1")[0]!;
    const prevButton = carouselElement.shadowRoot!.querySelector(".arrow-button--left")!;
    const nextButton = carouselElement.shadowRoot!.querySelector(".arrow-button--right")!;
    const paginationDots = carouselElement.shadowRoot!.querySelector(".paginationdots__wrapper")!;
    await waitFor(() => [expect(prevButton).not.toBeVisible(), expect(prevButton).toHaveClass("arrow-button--hidden"), expect(nextButton).toBeVisible(), expect(nextButton).not.toHaveClass("arrow-button--hidden")]);
    await expect(paginationDots).toBeVisible();
    await click(paginationDots.children[1] as HTMLElement);
    await waitFor(() => [expect(prevButton).toBeVisible(), expect(prevButton).not.toHaveClass("arrow-button--hidden"), expect(nextButton).toBeVisible(), expect(nextButton).not.toHaveClass("arrow-button--hidden")]);
  }
}

Asynchronous Content

Story: components-carousel-interaction-tests--asynchronous-content · tags: play-fn

<oc-carousel-v1></oc-carousel-v1>

Story source (TypeScript, verbatim from Storybook)

{
  render() {
    return html` <oc-carousel-v1></oc-carousel-v1>`;
  },
  parameters: {
    chromatic: {
      disableSnapshot: true
    }
  },
  play: async ({
    canvasElement
  }) => {
    const cinemaElement = canvasElement.getElementsByTagName("oc-carousel-v1")[0]!;
    const item = document.createElement("div");
    item.innerHTML = "Content";
    item.tabIndex = 0;
    const items = Array.from({
      length: 20
    }).map(() => item.cloneNode(true));
    cinemaElement.append(...items);
    await tick();
    const paginationDots = Array.from(cinemaElement.shadowRoot!.querySelectorAll(".paginationdots__item"));
    await expect(paginationDots.length, "pagination dots should be rendered").toBe(20);
    await expect(paginationDots[0].classList.contains("paginationdots__item--selected"), "first pagination dot should be selected").toBeTruthy();
    await expect(paginationDots.slice(1).some(e => e.classList.contains("paginationdots__item--selected")), "other pagination dots should not be selected").toBeFalsy();
  }
}

Overview (v1)

Carousel

Default variation

Configuration

Usage guidelines

Accessibility

Use oc-aria-label

Events

Item visibility changed

Stage scroll

Configuration (v1)

Carousel configuration

API v1

Carousel v1 API

API: <oc-carousel-v1> (CarouselV1)

Attributes / properties

Slots

Events

Methods

CSS custom properties

Variations (v1)

Variations

Default

Size 50

With video

Arrow-Buttons on Hover

Hidden Arrow-Buttons

Few Items

Few Items Size 50

Demo: In a sheet

Demo: multiple images

Demo: Move-Method

Demo: Multiple Carousels

Interaction tests (CarouselV1.interactions.stories.ts)

Move Carousel

Single Slide

Move On Pagination Dots Click

Asynchronous Content

Use `oc-aria-label`

API: `<oc-carousel-v1>` (CarouselV1)