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>