Responsive slideshow

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

---

• 

  Front end view of a Chevrolet Bel Air

• 

  1930s Aston Martin racing car

• 

  Interior of a VC 10 airliner

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">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/responsiveslides.js"></script>

The images are inserted into a <ul> like so:
<ul class="rslides">
<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>
</ul>
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 </body> tag:
<script>
$(".rslides").responsiveSlides({
speed: 500, // Integer: Speed of the transition, in milliseconds
timeout: 8000 // Integer: Time between slide transitions, in milliseconds
});
</script>
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>
</li>
</ul>

---