AAG Carousel

• The component resides inside the EH Composites tab in the Toolbox by the name AAG Slick Carousel.
• The component should be added inside Section Container or Container component.
• The component is based on Slick Carousel
• CAs can add video and image, both, in the slide individually.
• All the applicable fields for the image slide are available in the Slide field section and the only field required to add a video to the slide is available in the Video Content field section.
• The video will always open in a modal.
• Applicable fields for the slide are -
  • Youtube video ID - add YouTube video ID here, used to add a video to the slide.
  • Slide image - image field to add an image in the background, the same image will be used when a video is added.
  • Slide text - single line text field to add a heading to the slide.
  • Slide body - rich text field to add body to the slide.
  • Slide link - link field to add CTA, at the bottom.
• If CAs wish to adjust the size of the carousel, it's preferable to create a Container component and adjust the grid settings there.
• CA can use the paint bucket to select the AAG Slick Carousel option Small to display AAG Slick Carousel in a smaller size.
• A few examples of different types (single slide, single video slide, and multiple slides) of AAG Carousels are shown HERE

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 "AAG Slick Carousel" rendering under EH Composites 

3. Once the component has loaded, ensure the design view is enabled under the view tab. Change the variant to AAG Carousel Slide.

4.Once the variant is loaded, click the image placeholder. Click the add image icon. 

5. Title is managed by a title field. Authors will be able to add a title by replacing the placeholder text. 

6. Once the image has loaded, click the placeholder text in the body 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. 

7. Click the link placeholder to add a link. click the link with a pencil icon. 

To Add A Slide 

8.  Ensure the design view is enabled in the View tab. Click the 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. 

9. Select the plus icon 

10. Create the data source for the new slide 

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

To Delete A Slide 

12. Ensure design view is enabled in the View tab. Click the 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. 

13. Click the delete icon. 

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

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

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. 

AAG Carousel:

• The AAG Carousel uses slick slider and displays one image at a time. 
• The AAG Carousel will include the following elements:
  • Background Image
  • Video
  • Title (H2)
  • RTE
  • CTA
• The CA can add up to 5 slides and will be monitored via content governance.
• If only one slide is added the slider is disabled. 
• The content should appear within a green inline block centered over image. 
  • No limit on characters
• The height of the inner block will not exceed the carousel. 
• Set a maximum height for carousel; follow live site. 
• The CA should be able to add video to inline block.
• Video will play in modal see: Video Image Promo for modal details.
• User should also be able to click on prev or next arrows to move between slides. 
• Arrow nav behavior:
  • Left and right
  • Drag with mouse
  • Touch swipe
• CTA has hover effect of carat extending (no change in color)
• Please see live site for design: Live Site
• This component must follow accessibility standards for alt text, and keyboard navigation. 

Mobile:

• Content is stacked with image on top.