Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
img
 
 
js
 
 
 
 
 
 

README.md

Kslider : simple slider for jQuery

Kslider is a very simple slider for images which only require a small HTML and jQuery code (4kb) to work

How it works

Your HTML with thumbnails (example 1)

 <div id="kslider">
	<div>
		<img src="img/1.jpg" alt="">
		<img src="img/2.jpg" alt="">
		<img src="img/3.jpg" alt="">
		<img src="img/4.jpg" alt="">
		<img src="img/5.jpg" alt="">
		<img src="img/6.jpg" alt="">
		<img src="img/7.jpg" alt="">
		<img src="img/8.jpg" alt="">
		<img src="img/9.jpg" alt="">
		<img src="img/10.jpg"alt="">
	</div>
	<div>
		<img src="img/thumbs/1.jpg" alt="">
		<img src="img/thumbs/2.jpg" alt="">
		<img src="img/thumbs/3.jpg" alt="">
		<img src="img/thumbs/4.jpg" alt="">
		<img src="img/thumbs/5.jpg" alt="">
		<img src="img/thumbs/6.jpg" alt="">
		<img src="img/thumbs/7.jpg" alt="">
		<img src="img/thumbs/8.jpg" alt="">
		<img src="img/thumbs/9.jpg" alt="">
		<img src="img/thumbs/10.jpg" alt="">
	</div>
</div>

Your HTML without thumnbails (example 2)

 <div id="kslider">
	<div>
		<img src="img/1.jpg" alt="">
		<img src="img/2.jpg" alt="">
		<img src="img/3.jpg" alt="">
		<img src="img/4.jpg" alt="">
		<img src="img/5.jpg" alt="">
		<img src="img/6.jpg" alt="">
		<img src="img/7.jpg" alt="">
		<img src="img/8.jpg" alt="">
		<img src="img/9.jpg" alt="">
		<img src="img/10.jpg"alt="">
	</div>
</div>

Examples of Javascript code

<script>
	$(document).ready(function(){ 
		$('#kslider').kslider();
		$('#kslider2').kslider({width:325,       // Width of the slider
								height:200,      // Height of the slider
								widthThumb:60,   // Width max of the thumbnail
								heightThumb:37,  // Width max of the thumbnail
								speed: 500,      // Speed of the transition
								sameSize: false, // Same size for all thumbnails
								opacity:0.4,     // Opacity of the thumnails
								nav:false});     // Show the arrows of navigation
								
		$('#kslider3').kslider();
	});
</script>

You can design it with a small CSS

#kslider {
	box-shadow: 0px 0px 20px 6px #AAA;
	margin:40px;
	float:left;
}

#kslider .ksmall {
	background-color:#111;	
}

#kslider .ksmall img {
	background-color:#999;
	border:2px solid #EEE;
	margin:4px;
}

#kslider2 {
	box-shadow: 0px 0px 20px 6px #AAA;
	position:relative;
	margin:40px;	
	float:left;
}

#kslider2 .kbig img {
	position:absolute;
	cursor:pointer;
}

#kslider2 .ksmall {
	position:relative;
	background-color:#111;	
	cursor:pointer;
}

#kslider2 .ksmall img {
	background-color:#999;
	border:2px solid #EEE;
	margin:4px;
}

About

Simple slider for jQuery

Resources

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.