Configurator

LiveCarousel: size, arrows, pagination dots and skip link

HTML

<oc-carousel-v1 oc-aria-label="Wohnideen"><img src="/previews/imagery/samples/otto-lifestyle-photo/lifestyle-living-room.webp" alt="Wohnzimmer mit Sofa und Stehlampe" width="1200" height="800" loading="lazy" style="display:block;width:100%;height:auto"><img src="/previews/imagery/samples/otto-lifestyle-photo/lifestyle-kids-room.webp" alt="Kinderzimmer mit Spielzeug" width="1200" height="800" loading="lazy" style="display:block;width:100%;height:auto"><img src="/previews/references/images/otto/otto-fashion-drop-mojo-06.webp" alt="Mojo Drop Sweatshirt" width="1200" height="800" loading="lazy" style="display:block;width:100%;height:auto"><img src="/previews/references/images/otto/otto-buecher-sortiment.webp" alt="Bücher im OTTO Sortiment" width="1200" height="800" loading="lazy" style="display:block;width:100%;height:auto"></oc-carousel-v1>

Usage

Anatomy

Item stage: The items of the carousel are stored in the item stage. There is only one item visible at a time.

Pagination dots: Pagination dots show the amount of item-sets in the carousel. When tapping a pagination dot, the carousel will scroll into the corresponding view. Pagination dots are optional.

Variants

The carousel is available in two sizes. Size 100 uses icon button 50 as scroll buttons and size 50 uses icon button 25. Carousel 50 uses smaller pagination dots positioned on the inside.

If you place a video inside the carousel the pagination dots automatically show a play icon instead of a dot.

Behavior

States

The carousel has no own states, but uses the states of the scroll buttons and the pagination dots.

Interaction

The items of the carousel scroll by tapping the scroll buttons or scrolling horizontally. The item always snaps into place to become fully visible.

Infinite Scrolling: The carousel does not support infinite scrolling. That means, whenever users get to the last item, there is no shortcut back to the first item.

Auto-forwarding: The carousel does not support auto-forwarding. This can lead to unease, create unnecessary feelings of urgency, and necessitate the provision of a pause option.

Fitting

The items in the carousel are set to fill-parent. There is no spacing to the sides, but there is a small gap between the items.

Placement

To position the carousel, use fill-parent with no spacing to the left or right. This ensures that items can scroll out of view without disappearing too early or too late.

Responsiveness

On mobile devices, the scroll buttons are hidden automatically.

By default, the vertical position of the scroll buttons is set to 50% of the height of the carousel. If needed, this can be customized.

The left scroll button is hidden at the start of the carousel. The right scroll button is hidden at the end of the carousel. When the scroll buttons are hidden, the respective space is reserved for another second so accidental clicks are prevented (click-prevention).

Carousel vs. cinema

Use the carousel to display one item at a time and draw more attention to the content. Alternatively, you can use the cinema to display multiple items at once.

Best practices

Accessibility

The hitbox of the pagination dots is "undersized" as of "WCAG 2.2 Success Criterion 2.5.8 target size". That is acceptable though, as there is an equivalent control (horizontal scrolling / scroll buttons) for this function.

When entering a carousel using keyboard navigation, a skip link is shown that offers an option to "Überspringen". If this should be made more specific, "oc-aria-label" may be used to change this Skip Link to "[Label] überspringen".

Pagination dots are not part of keyboard navigation, as the function is doubled for keyboard users.

For information on accessibility, refer to the technical documentation.

Status

Cinema

Implementation

Live demo

Over-Ear-Kopfhörer in Schwarz, Frontansicht — LiveReal OTTO components, rendered by the OTTO component runtime

Kopfhörer im Detail — LiveReal OTTO components, rendered by the OTTO component runtime

Code

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

Overview (v1)

Carousel

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

Placeholder

HTML

<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)

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.

Placeholder

HTML

<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

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)

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.

Placeholder

HTML

<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

Placeholder

HTML

<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)

ITEM 1

ITEM 2

ITEM 3

ITEM 5

ITEM 6

ITEM 7

HTML

<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

ITEM 1

ITEM 2

ITEM 3

ITEM 5

ITEM 6

HTML

<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

ITEM 1

ITEM 2

ITEM 3

ITEM 5

ITEM 6

HTML

<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)

ITEM 1

ITEM 2

ITEM 3

HTML

<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

ITEM 1

ITEM 2

HTML

<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.

ITEM 1

ITEM 2

ITEM 3

ITEM 4

ITEM 5

ITEM 6

ITEM 7

ITEM 8

Open sheet

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>

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.

List of Carousels

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.

ITEM 1

ITEM 2

ITEM 3

ITEM 4

ITEM 5

ITEM 6

ITEM 7

ITEM 8

ITEM 9

ITEM 1

ITEM 2

ITEM 3

ITEM 4

ITEM 5

ITEM 6

ITEM 7

ITEM 8

ITEM 9

ITEM 1

ITEM 2

ITEM 3

ITEM 4

ITEM 5

ITEM 6

ITEM 7

ITEM 8

ITEM 9

ITEM 1

ITEM 2

ITEM 3

ITEM 4

ITEM 5

ITEM 6

ITEM 7

ITEM 8

ITEM 9

ITEM 1

ITEM 2

ITEM 3

ITEM 4

ITEM 5

ITEM 6

ITEM 7

ITEM 8

ITEM 9

ITEM 1

ITEM 2

ITEM 3

ITEM 4

ITEM 5

ITEM 6

ITEM 7

ITEM 8

ITEM 9

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>

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

HTML

<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();
  }
}

Configurator

Usage

Anatomy

Variants

Behavior

States

Interaction

Fitting

Placement

Responsiveness

Carousel vs. cinema

Best practices

Accessibility

Status

Related components

Implementation

Live demo

Code

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

List of 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)