Slideshows display a series of images, cycling through to the next image every 10 seconds.

Images can optionally have a title, a caption, and a link to another page.

Controls exist below and on the images to allow users to pause/skip and jump to different slides.

Progressive enhancement ensures that in the absence of any Javascript, slides render as an unordered text list.

If they exist, smaller/alternate size variations can be loaded for different devices.

WCMS use

Image requirements

Your main images should be about 960x320 pixels in size (3:1 ratio)

If your slideshow is going into one half of a 6 6 grid, the images can be 500px wide.

If your slideshow spans 12 columns or the entire width of the screen, you should use responsive images

If you have not built a group of images / URLs to populate the slideshow component you will need to do this prior to adding a slideshow item to the page. 

1.In the content editor navigate to 
Common Content > Images > Image Groups.  Right click Image Groups and insert a LinkedImageGroup Template (renaming as appropriate).

2.In the content tree, right click your new LinkedImageGroup and insert a LinkedImage.  

3.Populate the following fields, uploading your main image and thumbnail images where appropriate.

Title (optional)
Target URL 
 (not required for slideshow, but this field will be helpful if at a later date you opt to insert a Carousel).

Complete this process for each of the LinkedImage items.

Adding your images to the page

1. From the Experience Editor, in a placeholder press the 'add here' insert option
2.Browse Renderings > Building Blocks > Images > Slideshow
3.Select the required LinkedImageGroup



4.The completed slideshow will appear in the placeholder.  It may be necessary to save the page to ensure the slideshow item fully renders. 

<div id="slideshow">

                <h2>Header Title One</h2>
                <div class='caption'>
                    <p>Caption Title One</p>
                <img src=#"/>
                <h2>Header Title Two</h2>
                <div class='caption'>
                    <p>Caption Title Two</p>
                <img src=#"/>
                <h2>Header Title Three</h2>
                <div class='caption'>
                    <p>Caption Title Three</p>
                <img src="#"/>
    <p class="slideshowmenu invisible"></p>
Version and status
  • current version
  • Concept