Hero carousel

The Hero carousel component is used to display content as follows:

Add a hero carousel and carousel slides

To add a hero carousel to a page using the hero carousel component:

  1. In Pages, navigate to the page you want to add the component to.

  2. From the Components panel, drag and drop the PageContent > Hero carousel component into the Main container on the page, or click on the + icon in the Main container and select the Hero carousel component from the popup window.

  3. In the Assign content item window, click once on the last (if there are multiple) data folder in the tree to select it, and click + Create new.

    Note: You may see 3 data folders in the Assign content item window.

    • First data folder: Site data. The data items in this folder are available for use on any page across your group site only.
    • Second data folder: Shared data. The data items in this folder are available for use on any page across any group site.
    • Third data folder: Local data. The data items in this folder are available for use on the current page only.

  4. Click on Hero carousel to create a data source and type the name for the new content item without clicking on the data source itself. Press enter once you have finished typing the data source name and click Assign.

  5. The new data source will appear on the page.  To add a slide to it, click on Manage items > + Add new from the right-hand panel, and select HeroCarouselSlide.

  6. Enter a name for the slide and press enter. The page will refresh and you will see the slide appear with content placeholders in it. Click on [No text in the field] and enter a title for the carousel. This title will appear on every slide in the carousel.

  7. Each slide in the carousel can either contain an image, or a video.
    1. To add an image to the slide, click on the image placeholder and select Add from the right-hand panel. Find and select the image you want to use from the media library
    2. To add a video to the slide, click on [No text in field] to the right of Video URL and enter the URL for the video
  8. Repeat steps 5-7 for additional slides you want to add into the component.
  9. Apply any advanced styling options for this component.  Advanced style options appear in the right-hand panel for each component. The table below describes the options available for this component.

Style

Description

Themes

To apply a theme, refer to:

Automatic transition

To apply automatic transition between slides for the carousel:

  • Tick the Automatic transition between slides tick box in Advance Styling

  • Set the Transition interval in seconds in the field below

 
image-20241114-230010.png

 

10. Publish the page.

Delete slides

To delete a content item:

  1. Click on the Hero carousel component on the page to select it.
  2. From the Hero carousel panel on the right, expand Manage items.
  3. Hover over the slide you want to delete and click on the 3 dots.
  4. Select Delete.
  5. Publish the page.

Reorder slides

To reorder content items:

  1. Click on the Hero carousel component on the page to select it.
  2. From the Hero carousel panel on the right, expand Manage items.
  3. Click and drag the slides into the order you want them to appear within the carousel.
  4. Publish the page.