Overview

This article will show you how to add images to a Slideshow widget.

Compliance Notes

• Ensure that slideshows have four images or fewer. If there are more than 4 images, consider placing them in a Photo Gallery instead.
• Ensure that each image has compliant alt text.
• Keep the next/previous arrows and pagination options enabled. 
• Charts, graphs, maps, images with texts (complex images) should not be used in slideshows.
  
  

Instructions

1. Navigate to the page with your desired Slideshow Widget 
   Note: If needed, Add the Slideshow Widget to Your Page.
2. Ensure that Live Edit Is On
   
   
3. Click on the existing Slideshow widget
   
4. Click Add Images
   
   
5. Locate your desired images and check the box next to the images
   
   Note: To easily locate an image, you can Search for Display Name or ID. You can still select multiple images at a time, even if you search for different images. The widget will remember all the images you check throughout your search session.
   
6. Click Insert Marked
   
   
7. If desired, edit the image Title
   
   
8. Edit Advanced options
   
   
   • Caption: Add a caption
   • Alt Text: Add alt text
     • Note: Required for Accessibility Compliance.
   • Link?: Check to make the image a link
     • Link Address: Add the link
     • Open in new window: Click to open the link in a new window
   • Display: Add a From (start) and To (end) date
   • Remove: Click to remove an image from the slideshow
9. Add as many images as desired
   
   • Note: Ensure that slideshows have four images or fewer. If there are more than four images, consider placing them in a Photo Gallery instead.
10. Configure Options
    
    
    • Slide Timing: The number of seconds each image will display
    • Transition: Images can either Fade from one to the next, or Slide to the next
    • Transition Timing: The number of seconds it takes for the fade or slide
    • Slide Title: Check to place a title on each slide
    • Slide Caption: Check to show captions with each image
      
      
      • Slide Overlay: Displays the title and/or caption in an overlay on each slide
      • Caption Background: Display background for the overlay
      • Caption Location: Determines the location of the caption and overlay
      • Inset Caption: Insets the caption so that it’s not aligned to the border of the slideshow
      • Narrow Display Behavior: Determines how the slide will behave in the narrow view
    • Next/Previous Arrows: Display left and right navigation arrows; this option will be enabled by default to help you maintain accessibility best practices
      
      • Always show arrows, even when not hovering over slideshow: Click to enable
      • Always show arrows, even on narrow widths (excluding mobile): Click to enable
      • Arrow Color: Color of the arrow
      • Next/Previous Arrow Background: Displays circle background for arrows; check for compliance
      • Arrow Background Color: Determines color of the arrow background
      • Next/Previous Background: Display a background behind the arrows on the left (previous) and right (next) sides
        • Background Color: Determines the color of arrow background
    • Pagination: This option will be enabled by default to help you maintain accessibility best practices
      • Pagination Style: Use either Dots or Numbers for the pagination links
    • Randomize Slides: Display slides in a random order
11. Click Save Slideshow
    
    
12. Click Save at the top of the page