Hero Carousel A Hero Carousel with configurable slides which take the full horizontal extension of the page
  • Use Cases: The Hero Carousel is used to display sides that take the full horizontal extension of the page. The auto-scroll time of the slides iteration are customizable, as well as the background image, text and text color of each slide.
  • Dependencies
    • None required. The Hero Carousel is fully self-contained and does not rely on child items or external data sources.
  • Configurable Slides: Each slide can be configured with a background image, text and text color.
  • Auto-Scroll: The slides of the Hero Carousel iterates automatically and the time of the iterations are configurable.
  • Arrows Available: The Hero Carousel is able to display arrows so the user can iterates manually between slides. The colors of the arrow and the arrow background are configurable.
EXAMPLE 1
This is an example of a HeroCarousel slide
EXAMPLE 2
This is another example of a HeroCarousel slide
HeroCarousel:
HeroCarousel Item:
Creating an Hero Carousel
  1. In Content Editor, create a "HeroCarousel Folder" under the "_datasources" of your page
  2. Create a new "HeroCarousel" item from the HeroCarousel template.
  3. Fill in the required fields
    • List of Cards
  4. Fill in optional fields: AutoScroll Time, Arrow Color, etc
  5. Still in Content Editor, create one or more "HeroCarousel Item" items from the HeroCarousel Item template under the main "HeroCarousel" item created in the previous step
  6. Fill in the required fields
    • Image
    • Font Color
    • Text
  7. Still in Content Editor, go back the main "HeroCarousel" item created in the first step and add the "HeroCarousel Item" items created to the List of Cards
  8. In Experience Editor, insert the HeroCarousel rendering into the awt-body placeholder of the page.
  9. Associate the "HeroCarousel" item as the data source.
  • Arrows: Left and right arrows can be displayed so users can manually navigate through slides. The default is to not display arrows.
EXAMPLE 1
This is an example of a HeroCarousel slide
EXAMPLE 2
This is another example of a HeroCarousel slide
  • There are currently no known issues with this component
Original Documentation: Confluence Link Designs: Figma Link