The Scrollable Hero component provides a
Scrollable Hero component
To load the component
To load Scrollable Hero component onto the page:
- Open Side Panel if closed, and then click on Components tab
- Drag and drop the Scrollable Hero component.

- Drag and drop image from the Side Panel > Assets tab. (Fig. 2)
- Populate necessary fields.
Note: For the URL field, please make sure you use the Path Picker to select the internal page you want to link to. The Path Picker will allow the system to save the link reference information at the back end and can automatically update the page URL when the linked page is moved to other location.

- To add more hero items, repeat step 3 - 5. (Fig 3)
- To remove hero item, click on "-" icon beside the corresponding hero item.
- To enable the auto-scroll feature, toggle Enable auto-scroll from OFF to ON.
Note: Auto-scroll feature will advance hero after a pre-set wait time. Viewer's interaction is not required. However, if the viewer would like to manually advance to the next hero, he/she can click on the navigation bullets at the lower left corner of the component. - Click Done icon (check mark)

Troubleshooting
Where can I find out about recommended image size?
To find out more about the best image size for the Hero component, please consult the Recommended Image Size page.
The component is missing the navigation arrow in the middle and it is missing the auto-scroll navigation bullets.
This is probably due to the incomplete cached component on the page. To fix this issue, follow these steps:
- Open the Component Config Panel, and toggle the Enable auto-scroll from OFF to ON. This will refresh the component and switch on the auto-scroll feature. Click Done (checkmark) to exit the Config Panel.
- If you would like to keep the auto-scroll feature in place, you can simply publish the page now and skip the steps below.
- If you would like to switch to the manual-scroll feature, open the Component Config Panel again, and toggle the Enable auto-scroll from ON to OFF.
- Publish the page.