Slick Carousel

• Component resides inside the EH Composites tab in the Toolbox by the name Slick Carousel.
• The Slick Carousel component is built using a list of slides (Slick Carousel Slide and RSS Feed Slide).
• Applicable fields of Slick Carousel Slide: 
  • Slide Image:  Image field to add image.
  • Slide Text: RTE field to add Slide text.
  • Slide Body: RTE field to add Slide Body.
  • Slide Link: Link field to add Slide link.
  • Slide Subtitle: Droplist field to select either of the options Blog, News, Clinical Trials, and Emory Clinic.
    
• Applicable fields of RSS Feed Slide which come from Feed i.e News Feed. 
  • Feed Urls
  • Feed Index
    
    
• By default Feed Index would be 1 and the Feed Url is "https://news.emory.edu/tags/school_or_unit/emory_healthcare/index_atom.xml".
• The data fetched from RSS Feed would result below fields:-
  • Slide Image
  • Slide Text
  • Slide Body
  • Slide Link
• In Slick Carousel, CA has the option to add a new slide or delete the existing slide.
• Slick Carousel does not have any rendering variant.
• Carousel Slides will not auto-rotate as per requirement.
• Slick Carousel Slider's Previous and Next buttons would be disabled based on which slide we are on currently.
• An Example of Slick Carousel Component is shown HERE.
• This component built using Slick Slider.
• Slider options can be configured from src/Project/Emory/theme/scripts/component-slick-slider.js
  
  

The Slick Carousel is used to display items from a data feed on a page in a three column format.

1.  Select where on the page you would like to place a Slick Carousel, then select the EH Composits tab and select the Slick Carousel

2.  Once the Slick Carousel has been added to the page, the title of the Slick Carousel can now be edited within the experience editor

3.  The content author can edit the contents of the Slick Carousel by selecting the data feed icon within the tool bar

4.  The feed for the information in the Slick Carousel can now be edited within this dialog box

5.  There are no variants or variations outside of this data section in the Slick Carousel.

Slick Carousel ( 3 col content)

• The 3 Column content carousel will primarily be shown at the bottom of the landing/interior pages or above the subscribe newsletter banner if present. 
• The 3 Column content carousel will include the following elements:
  • Title field (above slider, left and center aligned)
  • Slide
• RSS Slide requirements:
  • RSS URL (dropdown)
  • RSS Index
  • Image
• Content Slide requirements:
  • Image
  • Title (dropdown)
    •  News (standard value, if nothing selected it will default to News)
    • Blog
    • Clinical Trials
    • Emory Clinic
  • Sub title
  • Body (Hover State)
  • Link
• RSS or Content slide can be added in any order
• Only one RSS that we'll pull from, when CA adds RSS slide it defaults to first option in RSS URL dropdown, and defaults to RSS index of 1.
• We will use XML vs RSS feed for the inclusion of the imagery.
• Arrow nav behavior
  • Left and Rigt
  • Drag with mouse
  • Touch swipe
• User should also be able to click on scroll dots and or prev or next to move between slides.
• For styling please see: Designs
• Eyebrow can be left or center aligned
• Upon hover of the slides the bottom changes to blue.
• Hover state of nav arrows will expand.
• Hover state on Prev and Next
• Disable Prev on first slide
• Disable next on the last slide.
• This component must follow accessibility standards for alt text, and keyboard navigation.

Mobile:

• Content is stacked and only one slide will show.