$(document).ready(function() {
$('#kslider').kslider({width:325,
height:200,
widthThumb:60,
heightThumb:37,
speed: 500,
sameSize: false,
opacity:0.4,
nav:true});
});
<div id="kslider">
<div>
<img src="http://dev.kevingermain.com/kslider/img/differentSize/1.jpg" alt="">
<img src="http://dev.kevingermain.com/kslider/img/differentSize/2.jpg" alt="">
<img src="http://dev.kevingermain.com/kslider/img/differentSize/3.jpg" alt="">
<img src="http://dev.kevingermain.com/kslider/img/differentSize/4.jpg" alt="">
<img src="http://dev.kevingermain.com/kslider/img/differentSize/5.jpg" alt="">
<img src="http://dev.kevingermain.com/kslider/img/differentSize/6.jpg" alt="">
<img src="http://dev.kevingermain.com/kslider/img/differentSize/7.jpg" alt="">
<img src="http://dev.kevingermain.com/kslider/img/differentSize/8.jpg" alt="">
<img src="http://dev.kevingermain.com/kslider/img/differentSize/9.jpg" alt="">
<img src="http://dev.kevingermain.com/kslider/img/differentSize/10.jpg "alt="">
</div>
<div>
<img src="http://dev.kevingermain.com/kslider/img/thumbs/1.jpg" alt="">
<img src="http://dev.kevingermain.com/kslider/img/thumbs/2.jpg" alt="">
<img src="http://dev.kevingermain.com/kslider/img/thumbs/3.jpg" alt="">
<img src="http://dev.kevingermain.com/kslider/img/thumbs/4.jpg" alt="">
<img src="http://dev.kevingermain.com/kslider/img/thumbs/5.jpg" alt="">
<img src="http://dev.kevingermain.com/kslider/img/thumbs/6.jpg" alt="">
<img src="http://dev.kevingermain.com/kslider/img/thumbs/7.jpg" alt="">
<img src="http://dev.kevingermain.com/kslider/img/thumbs/8.jpg" alt="">
<img src="http://dev.kevingermain.com/kslider/img/thumbs/9.jpg" alt="">
<img src="http://dev.kevingermain.com/kslider/img/thumbs/10.jpg" alt="">
</div>
</div>
#kslider {
box-shadow: 0px 0px 20px 6px #AAA;
margin:15px 60px;
}
#kslider .ksmall img {
background-color:#999;
border:2px solid #222;
padding:2px;
}
External resources loaded into this fiddle: