jQuery.slideShow({});

This is a very simple and very easy to use slideshow plugin for jquery.
It will automatically create a slideshow with navigation out of your image list. The plugin also provides different callbacks and options that let you customize the way the slideShow react on mouse rollovers, clicks or slideChanges.

If you downloaded this file with the sources you should visit the plugin’s homepage.

The script is licensed under MIT License and you can use it for free!
All Images used are taken from the plugin’s author Marcel Eichner.

Download

jquery.slideShow.2009-07-20.zip (changelog)

Older versions

jquery.slideShow.2009-07-02.zip

Features

auto slideshow with repeat and a lot of options
callback for slide changing (gotoSlide) and slide Clicks (onSlideClick)
different option variables to configure
change of slide through clicking numbers, next, prev etc and mouse movement over the slides
text over images possible

Examples

Simple Slideshow

This slideshow does nothing than change the images every 3 seconds with a soft fade. See the next examples for more features.

$(document).ready() {
	$('.mySlideShow').slideShow();
}

Mouse-Over-Interaction

Give the user the possibility to change the image with his mouse pointer by setting hoverNavigation to true. This example shows the effect. Move your mouse over the image to change it.

$('.useMouseSlideShow').slideShow({
	hoverNavigation: true, // use mouse for navigation
	interval: false // disable auto-slideshow
});

Image Navigation

This example illustrates how to replac the navigation links with images and keep the slideshow working. See the sourcecode for further info.
The better way to have custom images in your navigation is to set background images for each navigation point by using css classes.

Callback Example

This example demonstrates how to use the gotoSlide and slideClick callback.
The gotoSlide callback echoes the current slide index in a div under the slideshow and the slideClick callback let you navigate back and forth by clicking a slide.

$('.callbackSlideShow').slideShow({
	interval: 5,
	slideClick: function(slideShow) {
		if (slideShow.mouse.x > slideShow.options.slideSize.width / 2) {
			slideShow.next();
		} else {
			slideShow.previous();
		}
	},
	gotoSlide: function(slideShow, index) {
		$('.callBackSlideShowLog').html('goto slide index: ' + index);
	}
});