Sudo Slider jQuery Plugin - Creative navigation 2

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({ 
         ajax: [
            '../images/01.jpg', 
            '../images/02.jpg', 
            '../images/03.jpg', 
            '../images/04.jpg', 
            '../images/05.jpg'
         ],
         prevNext:true,
         beforeAniFunc: 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 {
    width:696px;
}
#slider img{
    border:none;
}
#slider ul, #slider li{
    margin:0;
    padding:0;
    list-style:none;
}
#slider li { 
    width:696px;
    overflow:hidden; 
}
#slider, #slider ul, #slider li {width:550px;}
#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 url('../images/hover.png') repeat-x;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>