EH Carousel

• Component resides inside EH Composites tab in the Toolbox by the name EH Carousel.
• The EH Carousel component is built using list of slides (EH Carousel Slide).
• Applicable fields of Carousel Slide: 
  • Slide Image:  Image field to add image.
  • Slide Text: RTE field to add Slide text with 200 character limit.
• In EH Carousel, CA has option to add a new slide or delete the existing slide.
• EH Carousel does not have any rendering variant.
• Carousel Slides will not auto-rotate as per requirement.
• EH Carousel Slider will slide in cyclic through a series of slides.
• An Example of EH Carousel Component is shown HERE.
• Applicable options of Carousel Slide: 
  • Full Width background
• Enable the Full Width backgroud to create a larger slide that fill the full width. It's best for a slide on page without sidebar.

1. Open up EE and select the "Add Component" icon 

2. Click "Add Here" where you would like the component to be placed and select "EH Carousel" rendering under EH Composites 

3. Once the component has loaded, select the placeholder image and click the add image icon 

4. Select the image you would like to place and click "Select"

5. Once the image has loaded, click the placeholder text in the caption field. This field is managed by an RTE field. Authors can place text directly on the page or click the pencil button to open up the RTE window. 

To Add A Slide 

6.  Ensure the design view is enabled in the View tab. Click the EH Carousel component (not the slide). 

Hint: If you are having difficulty selecting the parent component to add a slide, select the following icon until you see the "Slide" design dialog box pictured in step 7. 

7. Select the plus icon 

8. Create the data source for the new slide 

9. Once the new slide loads, repeat steps 3-6.

To Delete A Slide 

10. Ensure design view is enabled in the View tab. Click the EH Carousel component (not the slide). 

Hint: If you are having difficulty selecting the parent component to add a slide, select the following icon until you see the "Slide" design dialog box pictured in step 7. 

11. Click the delete icon. 

Authors can change placement of the slides by using this same dialog box with the arrow icons. You have the following options: 

• Move Up 
• Move Down
• Move First
• Move Last

Full Width EH Carousel 

12. To enlarge the EH Carousel, open up paint bucket settings and check the Full width background box: 

Notes: 

• It may be quicker for content authors to add the component to the page in EE and then manage slides/data sources in the Content Editor experience. You will be able to add, delete and move data sources more easily in this view. 
• 

Make sure to save and publish changes. 

EH Carousel (Content Carousel 1 Col):

• The EH Carousel (1 col) should not auto rotate. It should display one image at a time.
  • The CA should only add up to 5 slides and will be handle via governance.
• The EH Carousel will include the following elements:
  • Image
  • RTE
• The content should appear within a blue bar at the bottom of the slider and a max of 200 characters. 
• If exceeds 200 characters the CA will be prevented from saving the item. 
• The CA should be able to edit and format content using RTE.
• The carousel should be capable of resizing according to grid structure.
• Arrow nav behavior
  • Left and right
  • Drag with mouse (mobile only)
  • Touch swipe
• User should also be able to click on scroll dots and or prev or next to move between slides.
• Links will be white with an underline
• Bar will extend up to full width depending on length of text.
• For styling please see: Designs
• This component must follow accessibility standards for alt text, and keyboard navigation. 

Mobile:

• See requirements above; image and content is stacked.