Swipe works but not buttons PREVIOUS and NEXT

I got a swipe feature from http://swipejs.com/

The swipe works on iPhone device and iOS Simulator. But "PREV ... NEXT" buttons does not work.

I've tested it on its own of a 'test page' as below, its ok.

A test run that works as below:
<!DOCTYPE HTML> 
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/> 
<link href='swipe.css' rel='stylesheet'/>
</head>
<body>

<h2>Full width</h2>

<div id='slider3' class='swipe'>
  <ul>
    <li style='display:block'><div>Step One</div></li>
    <li style='display:none'><div>Step Two</div></li>
    <li style='display:none'><div>Step Three</div></li>
    <li style='display:none'><div>Step Four</div></li>
    <li style='display:none'><div>Step Five</div></li>
  </ul>
</div>
<a href='#' onclick='slider3.prev();return false;'>prev</a> 
<a href='#' onclick='slider3.next();return false;'>next</a>

<script src='swipe.js'></script>
<script>
new Swipe(document.getElementById('slider'));
new Swipe(document.getElementById('slider2'));
var slider3 = new Swipe(document.getElementById('slider3'));
var slider4 = new Swipe(document.getElementById('slider4'));
</script>

</body> 
</html> 

Open in new window


BUT, When I add a swipe code on the main code and the "PREV ... NEXT" buttons does not work. However, the swipe function works. I've enclosed a screen grab of the the overall layout.

I've enclosed the full code for your convenience:
<!DOCTYPE html>

<!-- *********************************************************************************************

How to Create CSS3 + jQuery Accordion Menu [Tutorial]
"How to Create CSS3 + jQuery Accordion Menu" that was specially made for DesignModo by our friend Valeriu Timbuc.

Links:
http://vtimbuc.net/
https://twitter.com/vtimbuc
http://designmodo.com/futurico
http://vladimirkudinov.com
http://rockablethemes.com

********************************************************************************************* -->

<html lang="en">

<head>
&#9;<title>jQuery Accordion Menu</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /><!-- // Removing the device width and height from the meta tag will give us the fluid layout. http://css3wizardry.com/category/iphone/ -->
&#9;<meta name="apple-mobile-web-app-capable" content="yes">
&#9;<meta name="robots" content="noindex,follow" />
&#9;<meta name="apple-mobile-web-app-status-bar-style" content="black" />
&#9;<link rel="apple-touch-startup-image" href="images/splash.png" />
&#9;<script src="js/jquery.mobile.js"></script>


&#9;
&#9;<!-- // Performance improve with accordion function improves with Phonegap scripts were added. Smooth ease in and ease out effect. It degrade gracefully with rollover effect of the content heading bars.-->
&#9;<!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
&#9;<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
    <script type="text/javascript">


&#9;// If you want to prevent dragging, uncomment this section
&#9;/*
&#9;function preventBehavior(e)
&#9;{
      e.preventDefault();
    };
&#9;document.addEventListener("touchmove", preventBehavior, false);
&#9;*/
&#9;
&#9;/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
&#9;see http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
&#9;for more details -jm */
&#9;/*
&#9;function handleOpenURL(url)
&#9;{
&#9;&#9;// TODO: do something with the url passed in.
&#9;}
&#9;*/
&#9;
&#9;function onBodyLoad()
&#9;{&#9;&#9;
&#9;&#9;document.addEventListener("deviceready", onDeviceReady, false);
&#9;}
&#9;
&#9;/* When this function is called, PhoneGap has been initialized and is ready to roll */
&#9;/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
&#9;see http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
&#9;for more details -jm */
&#9;function onDeviceReady()
&#9;{
&#9;&#9;// do your thing!
&#9;&#9;navigator.notification.alert("PhoneGap is working")
&#9;}
   
    </script>
   
    <!-- Header and footer style start -->
    <link rel="stylesheet" href="css/generic.css" type="text/css" media="screen" />
    <!-- Header and footer style end -->
   
    <!-- Accordian Start. http://designmodo.com/jquery-accordion-menu/ -->
&#9;<link rel="stylesheet" href="css/accordionmenu.css" type="text/css" media="screen" />
&#9;<!-- <style type="text/css">body{background:url(images/bg.png) repeat;}.footer{margin-top:50px;text-align:center;color:#666;font:bold 14px Arial}.footer a{color:#999;text-decoration:none}#wrapper-250, .accordion{width:94%; margin:0 auto; max-width:500px;}</style> -->

<!-- Accordian script start -->
<!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>-->
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><!-- Change it to jquery1.7.2 from 1.7.1. It still works. Source: webdesignerwall.com/demo/mobile-nav/-->
<script type="text/javascript">

&#9;&#9;$(document).ready(function() {

&#9;&#9;&#9;// Store variables
&#9;&#9;&#9;
&#9;&#9;&#9;var accordion_head = $('.accordion > li > a'),
&#9;&#9;&#9;&#9;accordion_body = $('.accordion li > .sub-menu');

&#9;&#9;&#9;// Open the first tab on load

&#9;&#9;&#9;// accordion_head.first().addClass('active').next().slideDown('normal');

&#9;&#9;&#9;// Click function

&#9;&#9;&#9;accordion_head.on('click', function(event) {

&#9;&#9;&#9;&#9;// Disable header links
&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;event.preventDefault();

&#9;&#9;&#9;&#9;// Show and hide the tabs on click

&#9;&#9;&#9;&#9;if ($(this).attr('class') != 'active'){
&#9;&#9;&#9;&#9;&#9;accordion_body.slideUp('normal');
&#9;&#9;&#9;&#9;&#9;$(this).next().stop(true,true).slideDown('normal');
&#9;&#9;&#9;&#9;&#9;accordion_head.removeClass('active');
&#9;&#9;&#9;&#9;&#9;$(this).addClass('active');
&#9;&#9;&#9;&#9;}else{
                                        $(this).next('.sub-menu').slideUp('normal');
                                        $(this).removeClass('active');
                                        }
&#9;&#9;&#9;});


&#9;&#9;});

&#9;</script>            
<!-- Accordian script end -->




<!-- Coyer start -->
<link rel='stylesheet' href='css/style.css'>
<!-- Coyer end -->

<!-- Mobile navigation start -->
<script type="text/javascript">
jQuery(document).ready(function($){

&#9;/* prepend menu icon */
&#9;$('#nav-wrap').prepend('<div id="menu-icon">Menu</div>');
&#9;
&#9;/* toggle nav */
&#9;$("#menu-icon").on("click", function(){
&#9;&#9;$("#nav").slideToggle();
&#9;&#9;$(this).toggleClass("active");
&#9;});

});
</script>
<!-- Mobile navigation start -->

<!-- Mobile navigation start -->
<link href="css/mobile_navigation.css" rel="stylesheet" type="text/css">
<!-- Mobile navigation end -->

<!-- Swipe style start -->
<link href='css/swipe.css' rel='stylesheet'/>
<!-- Swipe style end -->

</head>

<body>
<!-- Header start -->
&#9;<div id="header"><h3>Heading</h3>
&#9;
&#9;
&#9;
&#9;&#9;<!-- Mobile navigation start -->
&#9;<nav id="nav-wrap">
&#9;<!--<div id="menu-icon">Menu</div>-->

&#9;<ul id="nav">
&#9;
&#9;<table width="90%" border="0" cellspacing="5">
    <tr>
        <td><li><a href="#">1</a></li></td>
        <td><li><a href="#">2</a></li></td>
        <td><li><a href="#">3</a></li></td>
        <td><li><a href="#">4</a></li></td>
        <td><li><a href="#">5</a></li></td>
    </tr>
    <tr>
        <td><li><a href="#">6</a></li></td>
        <td><li><a href="#">7</a></li></td>
        <td><li><a href="#">8</a></li></td>
        <td><li><a href="#">9</a></li></td>
        <td><li><a href="#">10</a></li></td>
    </tr>
</table>
&#9;
&#9;</ul>
&#9;</nav>
&#9;<!-- / Mobile navigation end -->
&#9;</div>
<!-- Header End -->

<!-- Body start -->
<!-- Swipe content start -->

<div id='gallery'>

  <div id='slider' class='swipe'>
    <ul>
      <li style='display:block'><div>ONE</div></li>
      <li style='display:none'><div>TWO</div></li>
      <li style='display:none'><div>THREE</div></li>
    </ul>
  </div>
 
  <nav>
    <a href='#' id='prev' onclick='slider3.prev();return false;'><em>prev</em></a>
    <span id='position'><em class='on'>&bull;</em><em>&bull;</em><em>&bull;</em></span>
    <a href='#' id='next' onclick='slider3.next();return false;'><em>next</em></a>
  </nav>

</div>
<!-- Swipe content end. Must include JS at bottom of CODE. Tried it. http://swipejs.com/ Comment: Place this at the bottom of the page, externally, to verify the page is ready. -->
<br><br>

<!-- Accordion start -->
&#9;<div id="wrapper-250">

&#9;&#9;<ul class="accordion">
&#9;&#9;&#9;
&#9;&#9;&#9;<li id="one" class="files">

&#9;&#9;&#9;&#9;<a href="#one">My Files<span>495</span></a>

&#9;&#9;&#9;&#9;<ul class="sub-menu">
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;<li><a href="#"><em>01</em>Dropbox<span>42</span></a></li>
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;<li><a href="#"><em>02</em>Skydrive<span>87</span></a></li>

&#9;&#9;&#9;&#9;&#9;<li><a href="#"><em>03</em>FTP Server<span>366</span></a></li>

&#9;&#9;&#9;&#9;&#9;<li><a href="#"><em>04</em>Dropbox<span>1</span></a></li>
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;<li><a href="#"><em>05</em>Skydrive<span>10</span></a></li>

&#9;&#9;&#9;&#9;</ul>

&#9;&#9;&#9;</li>
&#9;&#9;&#9;
&#9;&#9;&#9;<li id="two" class="mail">

&#9;&#9;&#9;&#9;<a href="#two">Mail<span>26</span></a>

&#9;&#9;&#9;&#9;<ul class="sub-menu">
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;<li><a href="#"><em>01</em>Hotmail<span>9</span></a></li>
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;<li><a href="#"><em>02</em>Yahoo<span>14</span></a></li>

&#9;&#9;&#9;&#9;</ul>

&#9;&#9;&#9;</li>
&#9;&#9;&#9;
&#9;&#9;&#9;<li id="three" class="cloud">

&#9;&#9;&#9;&#9;<a href="#three">Cloud<span>58</span></a>

&#9;&#9;&#9;&#9;<ul class="sub-menu">
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;<li><a href="#"><em>01</em>Connect<span>12</span></a></li>
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;<li><a href="#"><em>02</em>Profiles<span>19</span></a></li>
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;<!-- coyer start -->
&#9;<div id="page-wrap">
&#9;&#9;&#9;&#9;
&#9;&#9;&#9;<div class="module blue">
&#9;&#9;&#9;&#9;<h2><em>03</em>Deaf person's attention <a href="#">1</a></h2>
&#9;&#9;&#9;&#9;<ul>
&#9;&#9;&#9;&#9;   <li>Take a step-by-step process.</li>
&#9;&#9;&#9;&#9;   <li>Approaching a Deaf person may be enough and your approach may suggest your intention to communicate.</li>
&#9;&#9;&#9;&#9;   <li>You can also wave to get eye contact or tap the person gently on the shoulder.</li>
&#9;&#9;&#9;&#9;</ul>

&#9;&#9;&#9;&#9;<h2><em>04</em>When is it my turn? <a href="#">2</a></h2>
&#9;&#9;&#9;&#9;<ul>
&#9;&#9;&#9;&#9;   <li>Set up a system in the surgery to that a visual indicator will allow a Deaf person to know when he or she is being called.</li>
&#9;&#9;&#9;&#9;   <li>A monitor in the waiting room is a good idea.</li>
&#9;&#9;&#9;&#9;   <li>If an interpreter is present, make sure you call the patient's name and not the interpreter's name.</li>
&#9;&#9;&#9;&#9;</ul>

&#9;&#9;&#9;&#9;<h2><em>05</em>Scheduling appointments <a href="#">3</a></h2>
&#9;&#9;&#9;&#9;<ul>
&#9;&#9;&#9;&#9;   <li>Ensure that email or text messages can be used to make an appointment.</li>
&#9;&#9;&#9;&#9;   <li>Why not try an online booking system?</li>
&#9;&#9;&#9;&#9;   <li>It is important that Deaf people manage their health and can book their own appointments.</li>
&#9;&#9;&#9;&#9;</ul>
&#9;&#9;&#9;</div>
&#9;</div>
<!-- coyer end -->

&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;

&#9;&#9;&#9;&#9;&#9;<li><a href="#"><em>03</em>Options<span>27</span></a></li>

&#9;&#9;&#9;&#9;&#9;<li><a href="#"><em>04</em>Connect<span>12</span></a></li>
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;<li><a href="#"><em>05</em>Profiles<span>19</span></a></li>

&#9;&#9;&#9;&#9;&#9;<li><a href="#"><em>06</em>Options<span>27</span></a></li>

&#9;&#9;&#9;&#9;</ul>

&#9;&#9;&#9;</li>
&#9;&#9;&#9;
&#9;&#9;&#9;<li id="four" class="sign">

&#9;&#9;&#9;&#9;<a href="#four">Sign Out</a>

&#9;&#9;&#9;&#9;<ul class="sub-menu">
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;<li><a href="#"><em>01</em>Log Out</a></li>
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;<li><a href="#"><em>02</em>Delete Account</a></li>

&#9;&#9;&#9;&#9;&#9;<li><a href="#"><em>03</em>Freeze Account</a></li>

&#9;&#9;&#9;&#9;</ul>

&#9;&#9;&#9;</li>
&#9;&#9;
&#9;&#9;</ul>
&#9;&#9;
&#9;</div>
<!-- Accordion end -->



<!-- Swipe content Start. http://swipejs.com/ Place this at the bottom of the page, externally, to verify the page is ready. -->.
<script src='js/swipe.js'></script>
<script>
new Swipe(document.getElementById('slider'));
new Swipe(document.getElementById('slider2'));
var slider3 = new Swipe(document.getElementById('slider3'));
var slider4 = new Swipe(document.getElementById('slider4'));
</script>
<!-- Swipe content end. Must include JS after slider otherwise it won't work. Tried it. http://swipejs.com/ Comment: Place this at the bottom of the page, externally, to verify the page is ready. -->

<!-- Body end -->

<!-- Footer Start -->&#9;
<div id="footer"></div>
<!-- Footer End -->&#9;
&#9;
</body>

</html>

CSS:
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, del, dfn, em, img, ins, kbd, q, samp, small, strong, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td, article, aside, footer, header, nav, section {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  /* background:transparent; */
}
body {
  -webkit-text-size-adjust:none;
  font-family:sans-serif;
}
h1 {
  font-size:36px;
  margin:15px;
  text-align:center;
  color:#666;
}
h2 {
  font-size:14px;
  font-weight:bold;
  color:#3c3c3c;
  margin:20px 10px 10px;
}
small {
  margin:0 10px 30px;
  display:block;
  font-size:12px;
}
a {
  margin:0 0 0 10px;
  font-size:12px;
  color:#3c3c3c;
}
.swipe {
  padding-bottom:20px;
}
.swipe li div, .swipe div div div {
  margin:0 10px;
  padding:50px 10px;
  background:#1db1ff;
  font-weight:bold;
  color:#fff;
  font-size:20px;
  text-align:center;
}

/* ***************** */
#gallery {
  background:#3db8c8;
}
  #slider {
    padding:13px 0;
  }
  #slider li div {
    margin: 0 13px;
    padding: 80px 10px;
    border-radius: 4px;
    border-top: 1px #fff solid;
    background: #F7F9FA;
    -webkit-box-shadow: 0px 1px 2px #0D0F11;
    -moz-box-shadow: 0px 1px 2px #0D0F11;
    box-shadow: 0px 1px 2px #0D0F11;
    color: #DDE1E4;
    font-size: 12px;
    text-align: center;
    text-shadow: 0 1px 0 #fff;
    color: #A4AEB7;
  }
  #gallery nav {
    border-top:1px #3A4146 solid;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#292F34), to(#23282C));
    background-image: -webkit-linear-gradient(top, #292F34, #23282C);
    background-image:    -moz-linear-gradient(top, #292F34, #23282C);
    background-image:     -ms-linear-gradient(top, #292F34, #23282C);
    background-image:      -o-linear-gradient(top, #292F34, #23282C);
    background-image:         linear-gradient(top, #292F34, #23282C);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#292F34', EndColorStr='#23282C'); 
    height:35px;
    position:relative;
  }
    #position {
      text-align:center;
      font-size:27px;
      line-height:1.3;
      color:#697279;
      display:block;
      position:absolute;
      top:0;
      left:50%;
      margin-left:-75px;
      width:150px;
    }
      #position em {
        display:inline-block;
        padding:0 3px;
        font-style:normal;
        text-shadow: 0 -1px 0 rgba(0,0,0,.35);
        font-family:sans-serif;
      }
      #position em.on {
        color:#fff;
      }
    #prev {
      border-right:1px #232628 solid;
      display:inline-block;
      text-decoration:none;
    }
      #prev em {
        display:block;
        border-right:1px #30373C solid;
        padding:10px 13px 8px;
        font-style:normal;
        font-weight:bold;
        font-size:11px;
        text-transform:uppercase;
        color:#697279;
        letter-spacing:1px;
        text-shadow: 0 -1px 0 rgba(0,0,0,.35);
      }
    #next {
      border-left:1px #232628 solid;
      display:inline-block;
      text-decoration:none;
      position:absolute;
      right:0;
      top:0;
    }
      #next em {
        display:block;
        border-left:1px #30373C solid;
        padding:10px 13px 8px;
        font-style:normal;
        font-weight:bold;
        font-size:11px;
        text-transform:uppercase;
        color:#697279;
        letter-spacing:1px;
        text-shadow: 0 -1px 0 rgba(0,0,0,.35);
      }

Open in new window


JS:
/*
 * Swipe 1.0
 *
 * Brad Birdsall, Prime
 * Copyright 2011, Licensed GPL & MIT
 *
*/

window.Swipe = function(element, options) {

  // return immediately if element doesn't exist
  if (!element) return null;

  var _this = this;

  // retreive options
  this.options = options || {};
  this.index = this.options.startSlide || 0;
  this.speed = this.options.speed || 300;
  this.callback = this.options.callback || function() {};
  this.delay = this.options.auto || 0;

  // reference dom elements
  this.container = element;
  this.element = this.container.children[0]; // the slide pane

  // static css
  this.container.style.overflow = 'hidden';
  this.element.style.listStyle = 'none';
  this.element.style.margin = 0;

  // trigger slider initialization
  this.setup();

  // begin auto slideshow
  this.begin();

  // add event listeners
  if (this.element.addEventListener) {
    this.element.addEventListener('touchstart', this, false);
    this.element.addEventListener('touchmove', this, false);
    this.element.addEventListener('touchend', this, false);
    this.element.addEventListener('webkitTransitionEnd', this, false);
    this.element.addEventListener('msTransitionEnd', this, false);
    this.element.addEventListener('oTransitionEnd', this, false);
    this.element.addEventListener('transitionend', this, false);
    window.addEventListener('resize', this, false);
  }

};

Swipe.prototype = {

  setup: function() {

    // get and measure amt of slides
    this.slides = this.element.children;
    this.length = this.slides.length;

    // return immediately if their are less than two slides
    if (this.length < 2) return null;

    // determine width of each slide
    this.width = ("getBoundingClientRect" in this.container) ? this.container.getBoundingClientRect().width : this.container.offsetWidth;

    // return immediately if measurement fails
    if (!this.width) return null;

    // hide slider element but keep positioning during setup
    this.container.style.visibility = 'hidden';

    // dynamic css
    this.element.style.width = (this.slides.length * this.width) + 'px';
    var index = this.slides.length;
    while (index--) {
      var el = this.slides[index];
      el.style.width = this.width + 'px';
      el.style.display = 'table-cell';
      el.style.verticalAlign = 'top';
    }

    // set start position and force translate to remove initial flickering
    this.slide(this.index, 0); 

    // show slider element
    this.container.style.visibility = 'visible';

  },

  slide: function(index, duration) {

    var style = this.element.style;

    // fallback to default speed
    if (duration == undefined) {
        duration = this.speed;
    }

    // set duration speed (0 represents 1-to-1 scrolling)
    style.webkitTransitionDuration = style.MozTransitionDuration = style.msTransitionDuration = style.OTransitionDuration = style.transitionDuration = duration + 'ms';

    // translate to given index position
    style.MozTransform = style.webkitTransform = 'translate3d(' + -(index * this.width) + 'px,0,0)';
    style.msTransform = style.OTransform = 'translateX(' + -(index * this.width) + 'px)';

    // set new index to allow for expression arguments
    this.index = index;

  },

  getPos: function() {
    
    // return current index position
    return this.index;

  },

  prev: function(delay) {

    // cancel next scheduled automatic transition, if any
    this.delay = delay || 0;
    clearTimeout(this.interval);

    // if not at first slide
    if (this.index) this.slide(this.index-1, this.speed);

  },

  next: function(delay) {

    // cancel next scheduled automatic transition, if any
    this.delay = delay || 0;
    clearTimeout(this.interval);

    if (this.index < this.length - 1) this.slide(this.index+1, this.speed); // if not last slide
    else this.slide(0, this.speed); //if last slide return to start

  },

  begin: function() {

    var _this = this;

    this.interval = (this.delay)
      ? setTimeout(function() { 
        _this.next(_this.delay);
      }, this.delay)
      : 0;
  
  },
  
  stop: function() {
    this.delay = 0;
    clearTimeout(this.interval);
  },
  
  resume: function() {
    this.delay = this.options.auto || 0;
    this.begin();
  },

  handleEvent: function(e) {
    switch (e.type) {
      case 'touchstart': this.onTouchStart(e); break;
      case 'touchmove': this.onTouchMove(e); break;
      case 'touchend': this.onTouchEnd(e); break;
      case 'webkitTransitionEnd':
      case 'msTransitionEnd':
      case 'oTransitionEnd':
      case 'transitionend': this.transitionEnd(e); break;
      case 'resize': this.setup(); break;
    }
  },

  transitionEnd: function(e) {
    
    if (this.delay) this.begin();

    this.callback(e, this.index, this.slides[this.index]);

  },

  onTouchStart: function(e) {
    
    this.start = {

      // get touch coordinates for delta calculations in onTouchMove
      pageX: e.touches[0].pageX,
      pageY: e.touches[0].pageY,

      // set initial timestamp of touch sequence
      time: Number( new Date() )

    };

    // used for testing first onTouchMove event
    this.isScrolling = undefined;
    
    // reset deltaX
    this.deltaX = 0;

    // set transition time to 0 for 1-to-1 touch movement
    this.element.style.MozTransitionDuration = this.element.style.webkitTransitionDuration = 0;
    
    e.stopPropagation();
  },

  onTouchMove: function(e) {

    // ensure swiping with one touch and not pinching
    if(e.touches.length > 1 || e.scale && e.scale !== 1) return;

    this.deltaX = e.touches[0].pageX - this.start.pageX;

    // determine if scrolling test has run - one time test
    if ( typeof this.isScrolling == 'undefined') {
      this.isScrolling = !!( this.isScrolling || Math.abs(this.deltaX) < Math.abs(e.touches[0].pageY - this.start.pageY) );
    }

    // if user is not trying to scroll vertically
    if (!this.isScrolling) {

      // prevent native scrolling 
      e.preventDefault();

      // cancel slideshow
      clearTimeout(this.interval);

      // increase resistance if first or last slide
      this.deltaX = 
        this.deltaX / 
          ( (!this.index && this.deltaX > 0               // if first slide and sliding left
            || this.index == this.length - 1              // or if last slide and sliding right
            && this.deltaX < 0                            // and if sliding at all
          ) ?                      
          ( Math.abs(this.deltaX) / this.width + 1 )      // determine resistance level
          : 1 );                                          // no resistance if false
      
      // translate immediately 1-to-1
      this.element.style.MozTransform = this.element.style.webkitTransform = 'translate3d(' + (this.deltaX - this.index * this.width) + 'px,0,0)';
      
      e.stopPropagation();
    }

  },

  onTouchEnd: function(e) {

    // determine if slide attempt triggers next/prev slide
    var isValidSlide = 
          Number(new Date()) - this.start.time < 250      // if slide duration is less than 250ms
          && Math.abs(this.deltaX) > 20                   // and if slide amt is greater than 20px
          || Math.abs(this.deltaX) > this.width/2,        // or if slide amt is greater than half the width

    // determine if slide attempt is past start and end
        isPastBounds = 
          !this.index && this.deltaX > 0                          // if first slide and slide amt is greater than 0
          || this.index == this.length - 1 && this.deltaX < 0;    // or if last slide and slide amt is less than 0

    // if not scrolling vertically
    if (!this.isScrolling) {

      // call slide function with slide end value based on isValidSlide and isPastBounds tests
      this.slide( this.index + ( isValidSlide && !isPastBounds ? (this.deltaX < 0 ? 1 : -1) : 0 ), this.speed );

    }
    
    e.stopPropagation();
  }

};

Open in new window

Screen-Shot-2012-08-26-at-04.27..png
RedscrapbookAsked:
Who is Participating?
 
RedscrapbookConnect With a Mentor Author Commented:
It is solved.

<script>
// slider
var slider = new Swipe(document.getElementById('slider'), {
      callback: function(e, pos) {
        
        var i = bullets.length;
        while (i--) {
          bullets[i].className = ' ';
        }
        bullets[pos].className = 'on';

      }
    }),
    bullets = document.getElementById('position').getElementsByTagName('em');
</script>

Open in new window

0
 
selvolCommented:
Wow, thats a ton of info.  Seems like you  have done some work.

When you hover over the NEXT & PREV do they respond?
And when you click them do the seem like you are not touching them?

I ask because I have ran a similar problem that was caused by a a top div covering
a div.

Have you tried to add  

z-index:999

Open in new window


to the button css?
0
 
RedscrapbookAuthor Commented:
Reaction:
On iOS Simulator, if I click NEXT & PREV it move down instead of next.
On a browser Chrome, it show sign of active link but does nothing.


I've added z-index: 9999; where position:relative; and this is the only position:relative; on CSS.
  #gallery nav {
    border-top:1px #3A4146 solid;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#292F34), to(#23282C));
    background-image: -webkit-linear-gradient(top, #292F34, #23282C);
    background-image:    -moz-linear-gradient(top, #292F34, #23282C);
    background-image:     -ms-linear-gradient(top, #292F34, #23282C);
    background-image:      -o-linear-gradient(top, #292F34, #23282C);
    background-image:         linear-gradient(top, #292F34, #23282C);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#292F34', EndColorStr='#23282C'); 
    height:35px;
    position:relative;
z-index: 9999;

Open in new window


I've also tried it on JS on HTML. It show the same reaction as above.

<script>
new Swipe(document.getElementById('slider'));
[b]myElement.style.position = "relative"; 
myElement.style.zIndex = "9999";[/b]
//var slider3 = new Swipe(document.getElementById('slider3'));
//var slider4 = new Swipe(document.getElementById('slider4'));
//window.mySwipe = new Swipe(document.getElementById('slider'));
</script>

Open in new window


Did I put z-index: 9999; in a correct place?
0
 
RedscrapbookAuthor Commented:
Solved. After a long trial and error.  I deserve a 500 points?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.