Sudo Slider jQuery Plugin - Navigation in slider
afterAniFunc & beforeAniFunc in docs
Usage
Include the javascripts
<script type="Text/Javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.sudoSlider.min.js"></script>
The Javascript to start it.
<script type="text/javascript" >
$(document).ready(function(){
var oldt = 0;
var sudoSlider = $("#slider").sudoSlider({
customLink: '.custom',
prevNext:false,
beforeAniFunc: function(t){
var scroll = -t+2;
if (scroll == 1) scroll = 0;
if (scroll < -2) scroll = -2;
var scroll = scroll * $('.custom').eq(0).outerWidth(true);
var diff = Math.sqrt(Math.abs(oldt-t));
var speed = parseInt(diff*800);
$('.customBox').animate(
{ marginLeft: scroll },
{
queue:false,
duration:speed
}
);
oldt = t;
}
});
});
</script>
The CSS
#slider {
width:696px;
}
#slider img{
border:none;
}
#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
}
#slider li {
width:696px;
overflow:hidden;
}
The HTML
<div style="position:relative;">
<div id="slider">
<ul>
<li><img src="../images/01.jpg" alt="image description"/></li>
<li><img src="../images/02.jpg" alt="image description"/></li>
<li><img src="../images/03.jpg" alt="image description"/></li>
<li><img src="../images/04.jpg" alt="image description"/></li>
<li><img src="../images/05.jpg" alt="image description"/></li>
</ul>
</div>
<div style="width:210px;height:40px;position:absolute;top:150px;left:100px;overflow:hidden;">
<div class="customBox" style="width:350px;height:40px;background:lightgrey;">
<div class="custom" rel="1"
style="height:30px;width:60px;margin:2px;float:left;background:grey;padding:3px;" >
<img src="../images/thumbs/01.jpg" height="30px;" width="60"/>
</div>
<div class="custom" rel="2"
style="height:30px;width:60px;margin:2px;float:left;background:grey;padding:3px;" >
<img src="../images/thumbs/02.jpg" height="30px;" width="60"/>
</div>
<div class="custom" rel="3"
style="height:30px;width:60px;margin:2px;float:left;background:grey;padding:3px;" >
<img src="../images/thumbs/03.jpg" height="30px;" width="60"/>
</div>
<div class="custom" rel="4"
style="height:30px;width:60px;margin:2px;float:left;background:grey;padding:3px;" >
<img src="../images/thumbs/04.jpg" height="30px;" width="60"/>
</div>
<div class="custom" rel="5"
style="height:30px;width:60px;margin:2px;float:left;background:grey;padding:3px;" >
<img src="../images/thumbs/05.jpg" height="30px;" width="60"/>
</div>
</div>
</div>
</div>