CTA Hero Slideshow Webpart

https://stage.oregon.gov/v4x/webparts/Pages/default.aspx#cta-hero-slideshow

The CTA Hero Slideshow Webpart displays page-wide images with cards that include a category, heading, description paragraph, and a call-to-action button (see image below). The entries cycle through in a carousel, and arrows on the left and right of the screen as well as the slide indicators below the description allow users to navigate between slides. This solution is maintained via a list located on the subsite’s content page. The following section explains how to maintain the list and add new instances of the CTA Hero Slideshow

Note: For best results, use this web part on Full-Width layout pages. Other layouts may work in a limited capacity but are not supported.

Maintaining CTA Hero Slideshow Webpart 

CTA Hero Slideshows are entirely managed through list items. Any changes to this feature should be made by updating the list items and their corresponding columns.

CTA Hero Slideshow List 

A list is required in addition to the web part to define the slide content. This list can be a brand new list created for this Webpart or you can connect to an already existing list. For the Webpart to work correctly, there are 3 columns that are required that are listed below. These list columns can be titled anything but must match the column types as defined below.

REQUIRED

• Title Field (Single Line of Text or Multiple Lines of Text): This column is used to display the heading on the card.
• Button URL Field (Single Line of Text or Hyperlink/Picture): This is the URL where you want the card button to route users. Use the full URL for external locations, and the relative URL for pages on the agency website.
• Button Text Field (Single Line of Text or Hyperlink/Picture): The text displayed on the call-to-action button.

Optional Fields

• Description Field (Single Line of Text or Multiple Lines of Text): This is used to add the paragraph displayed under the heading. 
• Image Url Field (Single Line of Text or Hyperlink/Picture): This column defines the background image. It expects the relative path to the image URL.
• Image Alt Field (Single Line of Text or Multiple Lines of Text): This column sets the alt text attribute for the background image.
• Category Field (Single Line of Text or Choice): This column categorizes the entries displayed in the component. The category appears as text at the top of the card.

Display Options

The Display options control the color and timing of the web part. Colors can be defined as hex values or web safe color names. Note that any color selections must meet WCAG standards, requiring a contrast ratio of at least 4.5:1.

• Primary Color: The outline color of the pause/call-to-action button.
• Secondary Color: The color of the title and fade effect.
• Arrows’ Color: The color of the next/previous slide arrows.
• Time Interval Between Slides: The duration, in milliseconds, that each slide is displayed.