Carousel Component (Restriced Use)

Component name: Carousel

Authors who can use: Governor's Office user groups

Templates/page types that can use component: Governor Content Page

Required or optional: optional

Carousel can only be added to Governor Content Page templates. Other templates do not offer the component.

Once on the desired page in Edit mode, add the Carousel by doing the following:

Option 1: Double click on “Drag components here.” A modal titled “Insert New Component” will pop up. Type “Carousel” in the search bar, or scroll to the Carousel in the list. Double click to add to page.

Option 2: On the left hand rail, navigate to the Components tab. Type “Carousel” in the search bar, or scroll to the Carousel in the list. Double click to add to page.

1. With the edit wrench, open the component.

2. Items tab

1. Add button: Add a new component to the Carousel slides. Once added, components can be edited as normal.

3. Properties tab

1. Active Item dropdown: Select which item should appear as the first in the Carousel slides. Default selection shows item #1 first.
2. Automatically transition slides checkbox: When checked, Carousel will autoplay the slides. Default unchecked. As requested by Governor's Office, not needed- leave unchecked.

4. Accessibility tab

1. Label field: Add an aria-label attribute for the Carousel that desribes content.
2. Previous field: Add an aria-label attribute for the Previous button. If authored, will appear visually on the button. If not authored, "Previous" will appear visually on the button.
3. Next field: Add an aria-label attribute for the Next button. If authored, will appear visually on the button. If not authored, "Next" will appear visually on the button.
4. Play field: Add an aria-label attribute for the Play button. As requested by Governor's Office, not needed- leave unchecked.
5. Pause field: Add an aria-label attribute for the Pause button. As requested by Governor's Office, not needed- leave unchecked.
6. Tablist field: Add an aria-label attirbute for the list of items label.
7. Sets carousel item's aria label to its title checkbox: When checked, uses aria label field for Carousel items title. Default unchecked.

5. Click Done to exit the component authoring.

6. To edit each item, click the panel from the toolbar, then select the item to edit.