Sudo Slider jQuery Plugin - TouchSwipe demo
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.touchSwipe-1.2.5.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 ulMarginLeft = 0;
var sudoSlider = $("#slider").sudoSlider({
continuous: true,
slideCount: 2,
speed:800,
afterAniFunc: function ()
{
ulMarginLeft = $("#slider ul").css("marginLeft");
ulMarginLeft = Number(ulMarginLeft.substring(0, ulMarginLeft.length - 2));
}
});
$("#slider").swipe({
swipeStatus:swipeStatus,
threshold:0,
allowPageScroll:"vertical"
});
var starttime;
var lastDistance;
function moveSlides(procent)
{
$("#slider ul").css("marginLeft",(ulMarginLeft + procent*slideWidth) + "px");
}
function swipeStatus(event, phase, direction, distance)
{
if (sudoSlider.getValue('clickable'))
{
if (phase == "move" && (direction == "left" || direction == "right"))
{
slideWidth = $(event.currentTarget).find("li").eq(0).width();
lastDistance = Number(distance);
if (direction == "left")
moveSlides(-lastDistance/slideWidth);
else
moveSlides(lastDistance/slideWidth);
}
else if (phase == "start")
{
starttime = new Date();
}
else if (phase == "end" || phase == "cancel")
{
var duration = ((new Date() - starttime)/lastDistance) * (slideWidth - lastDistance);
duration = duration > 1000 ? 1000 : duration;
sudoSlider.goToSlide((direction == "left") ? 'next' : 'prev', duration);
}
}
}
});
</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 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>