S3 Slider

What is it?

S3 Slider is a simple slideshow that displays images with their description.
This is an complete rewrite to make it smaller / simpler / more elegant.

It is simple to use, very small(~1kb for js+css) and elegant! Demo(older version, new looks similar) or Live demo

Original license is for free private/commercial use.

Download

Requires jQuery >= 1.3.

You need s3-slider.js and s3-slider.css

Works in IE6 + the rest.

Demo

Simple images with some misc text.

At the start IE6 will see an instant fade from blank->image0, if you do not like this make the first slide visible(display:block).

Naturally the timeout should never be smaller then 2 * fadeTime...

A Tile is good
Some text long or short text should be placed here to inform customers of your great products...

Another text long or short text should be placed here to inform customers of your great products, next slide has no text...

Finally a short text...

The Code

<div id="slider">
  <div class="slide first">
    <img src="demo/1.jpg">
    <span> <b>A Tile is good</b><br>Some text long or short text should be placed here to inform customers of your great products...</span>
  </div>
  <div class="slide">
    <img src="demo/2.jpg">
    <span> Another text long or short text should be placed here to inform customers of your great products...</span>
  </div>
  <div class="slide">
    <img src="demo/3.jpg">
    <span><b>But titles are not necessary</b><br> And even more text long or short text should be placed here to inform customers of your great products...</span>
  </div>
  <div class="slide">
    <img src="demo/4.jpg">
    <span> Finally a short text...</span>
  </div>
</div>

<script>
jQuery(function($){
  $('#slider').s3Slider({timeout:6000,fadeTime:1000});
});
</script>