jQuery Slip n Slide Demo

The best way of seeing how these are done is by viewing the source, but I've also put the creation code underneath each one.

• Basic Image Slider
• Vertical Slider
• Interval Slider
• Cycle Slider
• HTML Content Slider
• Complex Slider

Basic Image Slider

Default horizontal slider with the triggers set to the links below

Previous • Next

js:

$('#slides-basic').slipnslide({
	nextTrigger: $('#basic-next'),
	prevTrigger: $('#basic-prev')
});
					

css:

#slides-basic {
	width: 100%;	/* IE6 needs the width to be set */
}
					

Vertical Slider

A slider that goes upwards, again triggered by links

Previous • Next

js:

$('#slides-vertical').slipnslide({
	direction: 'vertical',
	nextTrigger: $('#vertical-next'),
	prevTrigger: $('#vertical-prev')
});
					

css:

#slides-vertical {
	height: 240px;
	width: 360px;
}
					

Interval Slider

Horizontal slider, moving on every 4 seconds:

js:

$('#slides-interval').slipnslide({
	useInterval: true,
	interval: 4000
});
					

css:

#slides-interval {
	width: 100%;
}
					

Cycle Slider

Horizontal slider, where the images repeat themselves rather than skipping back to the beginning.

Previous • Next

js:

$('#slides-cycle').slipnslide({
	nextTrigger: $('#cycle-next'),
	prevTrigger: $('#cycle-prev'),
	cycle: true
});
					

css:

#slides-cycle {
	width: 100%;
}
					

$('#slides-html').slipnslide({
	nextTrigger: $('#html-next'),
	prevTrigger: $('#html-prev')
});
					

#slides-html {
	width: 100%;
}

.slide {
	float: left; /* Only mandatory bit since divs are block level, but you can do what you want here, see the source */
}
					

Complex Slider

Loads of timing config options set, combines intervals and cycles, with API calls for a play/pause control.

Play

js:

$('#slides-complex').slipnslide({
	useInterval: true,
	interval: 1000,
	animationDuration: 900,
	cycle: true,
	autoplay: false
});

$('#playpause').click(function()
{
	var slider = $('#slides-complex').data('slipnslide');

	if(slider.is_playing)
	{
		slider.pause();
		$('#playpause').text('Play');
	}
	else
	{
		slider.next();
		slider.play();
		$('#playpause').text('Pause');
	}
});
					

css:

#slides-complex {
	width: 100%;
}