Sudo Slider jQuery Plugin - Creative navigation 2
afterAnimation & beforeAnimation in docs
Usage
Include the javascripts
<script type="Text/Javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.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({
ajax: [
'../images/01.jpg',
'../images/02.jpg',
'../images/03.jpg',
'../images/04.jpg',
'../images/05.jpg'
],
prevNext:true,
beforeAnimation: function(t){
var scroll = -t+2;
if (scroll == 1) scroll = 0;
if (scroll < -2) scroll = -2;
var scroll = scroll * $('.custom').eq(0).outerHeight(true);
var diff = Math.sqrt(Math.abs(oldt-t));
var speed = parseInt(diff*800);
$('#slidemenu ul').animate(
{ marginTop: scroll },
{
queue:false,
duration:speed
}
);
var substract = $('#slidemenu ul').offset();
var posi = $('#slidemenu ul li').eq(t-1).offset();
var topvari = posi.top - substract.top;
$('#slidemenu ul li.currentone').animate({
marginTop: topvari
}, speed);
oldt = t;
},
customLink: '.custom'
});
});
</script>
The CSS
#slider, #slider ul, #slider li, #slider li img {width:550px;height:190px;}
#slider {float:left;}
#slidemenu {width:146px;height:190px;background:grey;float:left;overflow:hidden;}
#slidemenu ul{margin: 0;padding: 0;list-style-type: none;font-weight: bold;}
#slidemenu ul li{float:left;display:block;position:relative;height:63px;width:146px;background:#5DC9E1;margin-right:15px;border-bottom:1px solid white;}
#slidemenu ul li a{z-index:40; float: left;text-decoration: none;color: #FFF;background: transparent;position:relative;padding:17px 0 0 20px;font-size:25px;}
#slidemenu ul li .hover{height:63px;position:absolute;width:146px;z-index:20; background: #333;padding:0;}
#slidemenu ul li.currentone{border:0;}
The HTML
<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>