Sudo Slider jQuery Plugin - TouchSwipe demo

  • 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.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>