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