Slideshow

Overview

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.

Example
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)
Caption (optional)
Image
Target URL (optional)
Thumbnail  (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. 

 

 

 

MVC.net use
Code 

<div id="slideshow">
    <ul>

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