Slideshows display a series of images, cycling through to the next image every 10 seconds.
Images can optionally have a title and a caption, and may also be linked through to another url.
Controls exist below and on the images to allow users to pause/skip and jump to different slides.
If they exist, smaller/alternate size variations can be loaded for different devices.
- WCMS use
Your main images should be about 960x320 pixels in size (3:1 ratio)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.
and 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 page1. 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
<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