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
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