Sudo Slider jQuery Plugin - Autowidth demo
Autowidth 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({
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>