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.

News

2010-04-06 Thanks to the people that pointed me at some bugs that are fixed now. One was in this Page example javascript code and an other one was in the slideshow when clicking on the numbered navigation. Both fixed now. Please download the latest release.
2010-02-20 I’ve tested jquery.slideShow with the new jQuery 1.4.2 and it still works!
I also added a new example that shows how to show text on slides.

Download

jquery.slideShow.2010-04-06.zip (changelog)

Older versions

jquery.slideShow.2009-11-25.zip
jquery.slideShow.2009-10-27.zip
jquery.slideShow.2009-07-20.zip
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
Random slideshow
start/stop with scripting

Examples

Websites that use it

Some websites, that allready use this plugin. If you also created a slideshow on your website, write me an email and I’ll link to the page: love@ephigenia.de

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();
}

Text over images

This slideshow example shows how to set up text on every slide. The p-Tag is positioned absolute and has an higher z-index as the image slides.

An example description text
There can also be links in the text www.marceleichner.de
Even line-brakes in the Text
are displayed!
The next image has no description text on it
Some other description text Example.
Lorem ipsum

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 replace 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.

Navigation Position

You easily can move the navigation to the top of the slideshow by changing the order of the ul tags.

Random start

Create a slideshow that starts from a random selected image

$('.randomSlideShow').slideShow({
	start: 'random'
});

Play/Pause/Stop Example

This example shows a slideshow with prev/next and a pause/play button that also changes it’s label when pressed.

var slideShow = $('.playPauseExample').slideShow({
	interval: 0.7
});
// now add logic to play/pause button
$('.playPauseExample a.togglePlayback').click(function() {
	if (slideShow.isPlaying()) {
		$(this).html('play');
	} else {
		$(this).html('stop');
	}
	slideShow.togglePlayback();
});

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);
	}
});