This article will show you how to add the Slideshow widget to a page.
Who can use this feature?
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 you would like to add the Slideshow widget to
- Ensure that Live Edit is On
- Select the Widgets tab
- Drag and drop the Slideshow widget into your content area
- Click Add Images in the slideshow pop-up window
- Compliance Note: Add no more than four images to the slideshow widget using the add images button.
- Check the boxes for the images you would like to add
- 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.
- 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.
- Select Insert Marked
- If needed, modify the image Titles
- Expand Advanced to configure more information
- Caption: Changes the image caption
- Alt text: Ensure that each image has compliant alt text
- Link?: Check to enter a URL you want that image to link to
- Display: If you want this image to only be displayed within a certain date range, enter those dates here
- Remove: Removes the image from your slideshow
- Choose the Options tab for more 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; selecting this will cause more options to appear
- 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 arrow background-color
- Next/Previous Background: Displays vertical bar background for the slideshow arrows
- 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: Check to display slides in a random order
- Select Save Slideshow
- Click Save
Feedback About the Article
Let us know what was helpful or not helpful about the article below.4 comments
I think the title on this article is slightly mis-leading. I was looking for instructions on how to populate the widget and did not look in this article due to the title. Perhaps the section concerning populating the widget could be pulled out into its own article? Or the title on this article could be change to more accurately reflect the information that will be provided?
It would really be helpful if the slideshow widget had the ability to replace an existing image or to re-cache images from the image repository. I had a user populate a slideshow with huge images that all needed to be scaled down. I went in to the image repository to scale them down but the slideshow didn't re-cache, was still loading massive images. And because there's no way to force it to reload the images or replace, I had to recreate the entire slideshow from scratch.
It would be great if there were a way to keep the slideshow from transitioning until someone clicks one of the arrows. Is this possible?
^ I just set the slide timing to 99 to essentially allow the same thing as turning off the transition. Not sure this is compliant, but I got the desired result!
Please sign in to leave a comment.