title: Swipe Right and Swipe Left
body: <p>I'm building an app for the ipad. Ideally, I want the home screen to display the logo, swipe left to view sign up page, and swipe right to log in.  I'd like the first screen to load to be the "middle" of the :
  <code>var numberOfSliderObjects = 3.</code> If I set the var <code>currentSliderObject = 2</code> (the middle), I can only slide one way to the left, which is correct, but then when I slide all the way to the right, my <code>div id='slider'</code> has element.style: <code>left: 768px</code>; when it should be at <code>0px</code> and still swipe-able.</p>
  
  <pre><code>var numberOfSliderObjects = 3;
  var currentSliderObject = 2;
  var slideDistance = 768;
  </code></pre>
  
  <p>// MOUSE EVENTS</p>
  
  <pre><code>$('#sliderPrevButton').on('tap', function(event){
      event.preventDefault();
      slideToPrevious();
  });
  
  $('#sliderNextButton').on('tap', function(event){ 
      event.preventDefault();
      slideToNext();  
  });
  </code></pre>
  
  <p>// TOUCH EVENTS</p>
  
  <pre><code>$('#slider').on('swiperight', function(event){ 
      event.stopPropagation();
      slideToPrevious();
  });
  
  $('#slider').on('swipeleft', function(event){ 
      event.stopPropagation();
      slideToNext();      
  });
  </code></pre>
  
  <p>// FUNCTIONS</p>
  
  <pre><code>function slideToPrevious(){
      if(currentSliderObject&gt;1){
      $("#slider").animate({
      left: '+='+slideDistance
      }, 'easeInOutExpo');    
  
      currentSliderObject--;
  
      };
  };
  
  function slideToNext(){
      if(currentSliderObject&lt;numberOfSliderObjects){
      $("#slider").animate({
      left: '-='+slideDistance
      }, 'easeInOutExpo');    
  
      currentSliderObject++;
      };
  };
  </code></pre>