Javascript is not enabled.

Javascript must be enabled to use this site. Please enable Javascript in your browser and try again.

Design System - IN BETA

Getting Started            Components            Presets             Templates

Carousel

The Core Component Carousel Component allows the content author to present content in a navigable carousel.

Editor to Copy/Paste
Training
Figma Design

Test Article Image Gallery

Lorem ipsum dolar sit amet consectetur.

Test Container with BG image

Lorem ipsum dolar sit amet consectetur.

Training

All Core Components are designed to be fully responsive, ensuring a seamless experience across all devices and browser widths.

Some advanced components, like the Carousel Component, may require specific consideration within the context of the implementing project in order to maintain responsiveness in all conditions. Using the Carousel Component, the content author to organize content in a rotating carousel of slides.

The edit dialog allows the content author to create, name, and order multiple slides as well as enable auto-transition with delay. Using the design dialog, the template author can define which components can be added to the carousel, enable or disable automatic transitions, and customize the styles.

Training Video

13:07

Authoring Capability

  • Add Button - Use the Add button to open the component selector to choose which component to add as a tab. Always select the Container component.

  • Active Item Dropdown - This dropdown allows you to use the default, which is the first slide or you can choose to display any of the other slides you have created.

  • Automatically Transition Slides Checkmark - If selected the carousel will automatically slide to the next slide with out the user manually selecting the arrow.

  • Label - Value of an aria-label attribute for the carousel, which describes the carousel’s content

  • Previous - Value of an aria-label attribute for the carousel navigation’s previous button label

  • Next - Value of an aria-label attribute for the carousel navigation’s next button label

  • Play - Value of an aria-label attribute for the carousel navigation’s play button label

  • Pause - Value of an aria-label attribute for the carousel navigation’s pause button label

  • Tablist - Value of an aria-label attribute for the carousel navigation’s list of items label

  • Set item’s aria label to its title - If checked, this option automatically sets the carousel items title to its aria-label description.

  • Carousel Type Dropdown -

    • None

    • AARP Now

    • AARP Now - more preview

    • CTG

    • MVC

    • UXDIA MVC