Carousel

<auro-carousel> is an HTML custom element that displays a group of elements in a scrollable container.

Use cases

Use <auro-carousel> when people need to:

• Scroll through flight date options, such as dates just before and after a chosen date
• Scroll through images

Install

Define dependency in project

Import the component in each project that uses <auro-carousel>.

Use CDN

If your project can't process JS assets, use the pre-processed assets. Legacy browsers, such as IE11, aren't supported.

Basic example

Custom component registration for version management

Every Auro component has two key parts: the class and the custom element definition. The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.

Installing the component as described in the Install section imports the class and registers the component globally for you.

However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), register the class manually under a custom element name to avoid conflicts.

To do this, import only the component class and call the register(name) method with a unique name:

This creates a new custom element <custom-carousel> that behaves like <auro-carousel>, so both can be on the same page without interfering with each other.