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, and images with text (complex images) should not be used in slideshows.
Instructions
- Navigate to the page with your desired Slideshow Widget
Note: If needed, Add the Slideshow Widget to Your Page. - Ensure that Live Edit Is On
- Click on the existing Slideshow widget
- Click Add Images
- 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. - Click Insert Marked
- If desired, edit the image Title
- 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
- 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.
- Configure the 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: The color of the arrow
- Next/Previous Arrow Background: Displays circle background for arrows; check for compliance
- Arrow Background Color: Determines the 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 the 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
- Click Save Slideshow
- Click Save
Feedback About the Article
Let us know what was helpful or not helpful about the article below.0 comments
Please sign in to leave a comment.