Here is an example of a responsive slideshow. This plugin has been chosen because it is simple and easy to implement.
>> Download the files used in this slideshow
>> The ResponsiveSlides.js web site for info and documentation
Responsive slideshow - ResponsiveSlides.js
A simple slideshow that works in all major browsers and IE from version 6. Images need to be the same size.
Links to the following need to be included in the document:
<link href="css/responsiveslides.css" rel="stylesheet" type="text/css">
The images are inserted into a
<ul> like so:
<li><img src="img/Chevvy.jpg" alt="Chevvy"></li>
<li><img src="img/Aston_Martin.jpg" alt="Aston Martin"></li>
<li><img src="img/VC-10.jpg" alt="VC 10"></li>
Notice that the
<ul> has a has an attribute of
class="rslides". This is referenced in the initialising script for the slideshow (see below).
Finally. to initialise the slideshow this script needs to be added before the closing
speed: 500, // Integer: Speed of the transition, in milliseconds
timeout: 8000 // Integer: Time between slide transitions, in milliseconds
This includes some options for timing of the slideshow.
To include a caption for the images, add another class name of
callbacks to the
<ul> and include a
<p class="caption">my caption here</p> in the
<li> for each image.
When including a caption the code will look like this:
<ul class="rslides callbacks">
<li><img src="img/Chevvy.jpg" alt="Chevvy">
<p class="caption">Front end view of a Chevrolet Bel Air</p>