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

• Sir Harold Hillier Gardens

  Visit Harold Hillier Gardens

  

• King Alfred's Statues

  Find him at the bottom of town.

  

• The Great Hall

  Visit The Great Hall

  

• Queen Elizabeth Country Park

  Visit Queen Elizabeth Country Park

  

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