Sudo Slider jQuery Plugin - Autowidth demo

Autowidth in docs
  • image description
  • image description
  • image description

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({
            speed: 800,
            continuous: true,
            beforeAnimation: function(t){
                var width = $(this).width();
                var diff = Math.sqrt(Math.abs(oldt-t));
                var speed = parseInt(diff*800);

                $('.nextBtn').animate(
                    { left: width },
                    {
                        queue:false,
                        duration:speed
                    }
                );
                oldt = t;
             }
        });
    });	
</script>

The HTML

<div id="slider" >
    <ul>
        <li><img src="../images/08.jpg" alt="image description"/></li>
        <li style="width:500px;"><img src="../images/02.jpg" width="500px;" alt="image description"/></li>
        <li><img src="../images/07.jpg" alt="image description"/></li>	
    </ul>
</div>