title: Mobile slider only responding every other touch
body: <p>I am trying to build a slider based upon <a href="http://css-tricks.com/the-javascript-behind-touch-friendly-sliders/" rel="nofollow">http://css-tricks.com/the-javascript-behind-touch-friendly-sliders/</a>. My goal is to make a horizontal, mobile-only slider that allows you to slide back and forth between the steps in a registration process.</p>
  
  <p>The code works for the most part, but the slider only moves every other touch, and I'm not sure why.</p>
  
  <p><a href="http://codepen.io/anon/pen/zKhao" rel="nofollow">http://codepen.io/anon/pen/zKhao</a></p>
  
  <p><strong>HTML</strong>:</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;div class="visible-xs mobile-tabs"&gt;
    &lt;div class="slider-wrap"&gt;
      &lt;div class="slider" id="slider"&gt;
        &lt;div class="holder"&gt;
          &lt;div class="slide-wrapper"&gt;
            &lt;h4 class="complete"&gt;&lt;a href="Step0"&gt;Before you begin&lt;/a&gt;&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="slide-wrapper"&gt;
            &lt;h4 class="complete"&gt;&lt;a href="Step1"&gt;1. Terms &amp;amp; Conditions&lt;/a&gt;&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="slide-wrapper"&gt;
            &lt;h4 class="current"&gt;2. Teams&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="slide-wrapper"&gt;
            &lt;h4&gt;3. Add-Ons&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="slide-wrapper"&gt;
            &lt;h4&gt;4. Review &amp;amp; Submit&lt;/h4&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong>:</p>
  
  <pre><code>a
  {
      color: #5fa4db;
      text-decoration: none;
  }
  
  .mobile-tabs
  {
      height: 45px;
      overflow: hidden;
      border-bottom: 1px solid #f1f2f4;
      white-space: nowrap;
      margin-bottom: 10px;
  }
  
  .mobile-tabs h4
  {
    color: #9fa9b2;
    display: inline-block;
    padding-right: 10px;
    padding-bottom: 10px;
    font-weight: bold;
    font-size: 18px;
  }
  .mobile-tabs h4.current
  {
    border-bottom: 5px solid #5fa4db;
    color: #0f2034;
  }
  
  .mobile-tabs h4.complete
  {
    color: #5fa4db;
  }
  
      /* CSS for mobile tab slider.
      Source: http://css-tricks.com/the-javascript-behind-touch-friendly-sliders/
      */
  
  .mobile-tabs .animate {
    transition: transform 0.3s ease-out;
  }
  
  .mobile-tabs .slider-wrap {
    width: 100%;
    position: absolute;
  }
  
  .mobile-tabs .slider {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  .mobile-tabs .ms-touch.slider {
    overflow-x: scroll;
    overflow-y: hidden;
  
    -ms-overflow-style: none;
    /* Hides the scrollbar. */
  
    -ms-scroll-chaining: none;
    /* Prevents Metro from swiping to the next tab or app. */
  
    -ms-scroll-snap-type: mandatory;
    /* Forces a snap scroll behavior on your images. */
  
    -ms-scroll-snap-points-x: snapInterval(0%, 1%);
    /* Defines the y and x intervals to snap to when scrolling. */
  }
  
  .mobile-tabs .holder {
    width: 300%;
    overflow-y: hidden;
  }
  
  .mobile-tabs .slide-wrapper {
    float: left;
    position: relative;
    overflow: hidden;
  }
  
  .mobile-tabs .slide div {
    width: 300px;
    height: 500px;
    z-index: 0;
  }
  </code></pre>
  
  <p><strong>JavaScript</strong>:</p>
  
  <pre><code>if (navigator.msMaxTouchPoints) {
  
      $('#slider').addClass('ms-touch');
  
      $('#slider').on('scroll', function () {
          $('.slide-image').css('transform', 'translate3d(-' + (100 - $(this).scrollLeft() / 6) + 'px,0,0)');
      });
  
  } else {
  
      var slider = {
  
          el: {
              slider: $("#slider"),
              holder: $(".holder")
          },
  
          slideWidth: $('#slider').width(),
          touchstartx: undefined,
          touchmovex: undefined,
          movex: 0,
          index: 0,
          longTouch: undefined,
  
          init: function () {
              this.bindUIEvents();
          },
  
          bindUIEvents: function () {
  
              this.el.holder.on("touchstart", function (event) {
                  slider.start(event);
              });
  
              this.el.holder.on("touchmove", function (event) {
                  slider.move(event);
              });
  
              this.el.holder.on("touchend", function (event) {
                  slider.end(event);
              });
  
          },
  
          start: function (event) {
              // Test for flick.
              this.longTouch = false;
              setTimeout(function () {
                  window.slider.longTouch = true;
              }, 250);
  
              // Get the original touch position.
              this.oldx = this.movex;
  
              // The movement gets all janky if there's a transition on the elements.
              $('.animate').removeClass('animate');
          },
  
          move: function (event) {
              // Continuously return touch position.
              this.touchmovex = event.originalEvent.touches[0].pageX;
              // Calculate distance to translate holder.
              this.movex = -this.oldx - this.touchmovex;
              // Defines the speed the images should move at.
              var panx = 100 - this.movex / 6;
              if (this.movex &lt; 600) { // Makes the holder stop moving when there is no more content.
                  this.el.holder.css('transform', 'translate3d(-' + this.movex + 'px,0,0)');
              }
          },
  
          end: function (event) {
          }
  
      };
  
      slider.init();
  }
  </code></pre>
  
  <p>In order to emulate the issue, you'll have to view the code on a mobile device (or use Chrome's mobile emulation) and try to slide the slider back and forth. It will move, but only every other time you attempt to slide it.</p>
  
  <p>I am completely lost, and any help will be appreciated.</p>