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