Kslider

Simple slider for jquery

Kslider is a very simple slider for images with a little code HTML and jQuery (4kb) to work
(Compatible with IE 7 !)

Example 1 : with generated thumbnails, without parameters and without CSS

HTML

<div id="kslider">
	<div>
		<img src="img/1.jpg" alt="kslider">
		<img src="img/2.jpg" alt="kslider">
		<img src="img/3.jpg" alt="kslider">
		<img src="img/4.jpg" alt="kslider">
		<img src="img/5.jpg" alt="kslider">
		<img src="img/6.jpg" alt="kslider">
		<img src="img/7.jpg" alt="kslider">
		<img src="img/8.jpg" alt="kslider">
		<img src="img/9.jpg" alt="kslider">
		<img src="img/10.jpg"alt="kslider">
	</div>
	//To use thumbnails, you can add a second div with them :
	<div>
		<img src="img/thumbs/1.jpg" alt="kslider">
		<img src="img/thumbs/2.jpg" alt="kslider">
		<img src="img/thumbs/3.jpg" alt="kslider">
		<img src="img/thumbs/4.jpg" alt="kslider">
		<img src="img/thumbs/5.jpg" alt="kslider">
		<img src="img/thumbs/6.jpg" alt="kslider">
		<img src="img/thumbs/7.jpg" alt="kslider">
		<img src="img/thumbs/8.jpg" alt="kslider">
		<img src="img/thumbs/9.jpg" alt="kslider">
		<img src="img/thumbs/10.jpg"alt="kslider">
	</div>
</div>

Javascript

$(document).ready(function(){ 
	$('#kslider').kslider();
});

Example 2 : Same as example 1 but with CSS and all parameters

Javascript

$(document).ready(function(){ 
	$('#kslider').kslider({width:325,
							height:200,
							widthThumb:60,
							heightThumb:37,
							speed: 500,
							sameSize: false,
							opacity:0.4,
							nav:false}); 
});

CSS

#kslider {
	box-shadow: 0px 0px 20px 6px #AAA;
}	
#kslider .ksmall img {
	background-color:#999;
	border:2px solid #222;
	padding:2px;
}

Example 3 : with different image sizes

Test with a fiddle !

Please Follow me Suivre @kevingermain and/or Tweet Tweeter
if you download the plugin :) I don't need a beer :P