Example of jQuery Slinky Slider Plugin

Visit the Slinky Slider jQuery project page

Comment or feedback on this plugin on my blog post

Slinky Slider is a jQuery plugin that loads HTML files into panels to be shown inside a nominated <div>. Once the panels have been loaded, all bar one are collapsed. An automatic animation cycles through the panels showing the content of each in turn. When the user mouses over a panel, it expands and the automatic animation stops. The panels can contain full HTML, or just image references.

Demonstration

This demonstration loads 5 HTML files (panel1.html, panel2.html, panel3.html, panel4.html and panel5.html). Each has only one tag: an image. The panels could just as happily contain full HTML, styles and scripts.

Keep your mouse outside the panel area to see the automatic animation. Once you move your mouse over the panel, the automatic animation ceases, and whichever panel you mouse over grows to fill the panel area.

Current Version

The current version is 1.0

Installation

Download the plugin (and jQuery itself), create 2 or more HTML files with content to be shown in the sliding panel area, then apply the plugin as a method to your chosen div:

<script type="text/javascript" src="scripts/jquery-1.3.min.js"></script>
<script type="text/javascript" src="scripts/jquery.slinkySlider.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#content").slinkySlider();						   
	});
</script>

Finally, add the following rule to your stylesheet:

.panelwrappers {
	overflow:	hidden;
}

Default settings

By default the following parameters are used:

Number of panels loaded: 5
Width of collapsed panel: 20 pixels
Gap between panels: 3 pixels
Animate panels automatically: Yes
Automatic animation time: every 8 seconds
Duration of transition: 1 second
Name of files loaded: panel[x].html (where [x] represents an integer in the range 1 - 5)

Passing in your own options

The plugin is fully configurable with your own choice of options:

$("#content").slinkySlider({
	numberofpanels		:	5,	// number of panels to load
	smallsize		:	20,	// size in pixels of collapsed panel
	transition		:	1000, 	// time in milliseconds for transition
	doauto			:	true,	// automatic timed animation? true/false
	autotimer		:	8000,	// time between automatic animations
	panelspacing		:	3,	// gap between collapsed panels
	panelname		:	"panel"	// sets the HTML filename (means filename will be "panel[x].html")
});

Important Notes

You must include the following style rule in your stylesheet:

.panelwrappers {
	overflow:		hidden;
}

This is necessary because the animate method of jQuery screws up the position model in Safari and/or IE if you don't include the rule in a stylesheet.

It is important that you do not add a position:relative; rule to your container element as IE6 and IE7 may produce unexpected results if you do.

Who wrote this?

What are the licensing terms?

This jQuery plugin is dual licensed under:

Which pretty much means you can do what you like with it, but you must include the copyright notice in the source code, and copies of the licenses with any redistribution of this software.