Small Cross-browser jQuery Slideshow Plugin - S3 Slider

S3 Slider is a simple, lightweight, automatic jQuery slideshow plugin which helps create a cross-fade effect when navigating between images, with image caption support.

How to use it:

1. Put jQuery library together with the jQuery S3 Slider plugin's JS & CSS files into the html page.

<link href="s3-slider.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="s3-slider.js"></script>

2. Add images and captions to the slideshow.

<div id="slider">
  <div class="slide first">
    <img src="1.jpg">
    <span> Caption 1 </span>
  </div>
  <div class="slide">
    <img src="2.jpg">
    <span> Caption 2 </span>
  </div>
  <div class="slide">
    <img src="3.jpg">
    <span> Caption 3 </span>
  </div>
  <div class="slide">
    <img src="4.jpg">
    <span> Caption 4 </span>
  </div>
  ...
</div>

3. Initialize the slideshow with default options.

$('#slider').s3Slider();

4. Set the animation speed and transition interval.

$('#slider').s3Slider({
  timeout:6000,
  fadeTime:500
});

5. Set the background opacity of the image captions.

$('#slider').s3Slider({
  spanOpacity: .7
});

---

This awesome jQuery plugin is developed by grosser. For more Advanced Usages, please check the demo page or visit the official website.