Sudo Slider jQuery Plugin - Navigation in slider

afterAniFunc & beforeAniFunc in docs
  • image description
  • image description
  • image description
  • image description
  • image description

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>