There are a lot of slideshows scripts out there and many of them are very useful. This is my attempt to create a jQuery slideshow as small (light) as possible with the following properties:

• respect the jQuery plugin standards
• keep compressed plugin as small as possible (<1.2kb)
• don't use any CSS but support them
• depend only on jQuery (not UI), compatible with 1.2 and above
• make sure it works for every browser (works in IE6)

Download (1.19 KB) | Demo

Usage

Here is an example of a slideshow only with images. Note that the slides must be wrap in a <div> element.

<div id="MyPictures">
    <div><img src="slide1.jpg" title="Picture One" /></div>
    <div><img src="slide2.jpg" title="Picture Two" /></div>
    <div><img src="slide3.jpg" title="Picture Three" /></div>
</div>

Call one line of JavaScript code:

$('#MyPictures').VerySimpleSlideshow({interval:3000});

Check out the source code on the demo for more slideshows examples.

Wiki

What if I want to use CSS?

This is the very basic CSS framework of a slideshow:

<style type="text/css">
    .VeryEasySlideshow { position:relative; }
    .VeryEasySlideshow .slide { position: absolute; opacity:0; z-index:9; }
    .VeryEasySlideshow .slide.active { opacity:1; z-index: 11; }
    .VeryEasySlideshow .slide.last-active { z-index: 10; }
</style>

Where can i contribute?

On Gitorious. Keep in mind that the code has to be as smaller and compact as possible.

References:

1. jquery: slideshow, when you're in another browser tab for a bit, then go back to the tab with the slideshow, it flips out
2. slideshow goes crazy if you tab away
3. Using Inheritance Patterns to Organize Large jQuery Applications