JS - Use the jQuery Slider control to create an interactive slideshow

Slidershow.js

//master function to hold all actions on slider
//HTML - you'll need an empty div with id=slider to hold the initiated control
$(function() {
	$( "#slider" ).slider({
		value:1, //start pos
		min: 1,
		max: 7, //number of slides
		step: 1,
		animate: true,
		change: function( event, ui ) { //run function each time the slider is used
			$(".steps").hide(); //hide all elements with class steps
			var i = $("#slider").slider("value"); //variable to hold current slider point
			var div = "#step-"+i; //create string to hold the div id that should be shown
			$(div).fadeIn(); //finally fade this div in to view
			//HTML - for the divs you'll need to add class=steps and ids of step-1, step-2 etc
		}
	});

	//functions for previous and next buttons
	//HTML - you'll two anchors with corresponding ids: prev and next
	$("#prev").click(function(){ //get current slider value and subtract 1
		$( "#slider" ).slider("value", ($( "#slider" ).slider( "value" )-1));return false;
	});
	$("#next").click(function(){ //get current slider value and add 1
		$( "#slider" ).slider("value", ($( "#slider" ).slider( "value" )+1));return false;
	});
	
	//functions for the pager
	//HTML - you'll need a set of anchors with corresponding ids: one, two etc. This will appear below the slider
	$("#one").click(function(){
		$( "#slider" ).slider("value", 1);return false;
	});
	$("#two").click(function(){
		$( "#slider" ).slider("value", 2);return false;
	});
	$("#three").click(function(){
		$( "#slider" ).slider("value", 3);return false;
	});
	$("#four").click(function(){
		$( "#slider" ).slider("value", 4);return false;
	});
	$("#five").click(function(){
		$( "#slider" ).slider("value", 5);return false;
	});
	$("#six").click(function(){
		$( "#slider" ).slider("value", 6);return false;
	});
	$("#seven").click(function(){
		$( "#slider" ).slider("value", 7);return false;
	});
});