title: jQuery Mobile changePage with swipe transition
body: <p>I can't seem to make the "reverse" slide effect while handling the "swiperight" event. So, the code below works fine but I would like when I make the "swiperight" that the next page would slide in from the left side and not right hand side. I did search the documentation and added the <code>reverse: true</code> as <a href="http://jquerymobile.com/demos/1.1.1/docs/api/methods.html" rel="nofollow">as it recomends</a> in to the "swiperight":</p>
  
  <pre><code>$.mobile.changePage("#page"+nextPage, {transition : "slide", reverse:true});
  </code></pre>
  
  <p>but this does not provide the wanted effect. Can you point out where am I doing it wrong?</p>
  
  <p>I have the following code on <a href="http://jsfiddle.net/GYAB7/" rel="nofollow">jsFiddle</a>:</p>
  
  <p><strong>html</strong>:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;jQuery Mobile Application&lt;/title&gt;
      &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /&gt;
      &lt;script src="http://code.jquery.com/jquery-1.5.2.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"&gt;&lt;/script&gt;    
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;section id="page1" data-role="page"&gt;
          &lt;header data-role="header"&gt;&lt;h1&gt;jQuery Mobile&lt;/h1&gt;&lt;/header&gt;
  
          &lt;div data-role="content" class="content"&gt;
              &lt;p&gt;First page!&lt;/p&gt;
          &lt;/div&gt;
          &lt;footer data-role="footer"&gt;&lt;h1&gt;O'Reilly&lt;/h1&gt;&lt;/footer&gt;
      &lt;/section&gt;
  
      &lt;section id="page2" data-role="page"&gt;
          &lt;header data-role="header"&gt;&lt;h1&gt;jQuery Mobile&lt;/h1&gt;&lt;/header&gt;
  
          &lt;div data-role="content" class="content"&gt;
              &lt;p&gt;Second page!&lt;/p&gt;
          &lt;/div&gt;
          &lt;footer data-role="footer"r&gt;&lt;h1&gt;O'Reilly&lt;/h1&gt;&lt;/footer&gt;
      &lt;/section&gt;
  
      &lt;section id="page3" data-role="page"&gt;
          &lt;header data-role="header"&gt;&lt;h1&gt;jQuery Mobile&lt;/h1&gt;&lt;/header&gt;
  
          &lt;div data-role="content" class="content"&gt;
              &lt;p&gt;Third page!&lt;/p&gt;
          &lt;/div&gt;
          &lt;footer data-role="footer"&gt;&lt;h1&gt;O'Reilly&lt;/h1&gt;&lt;/footer&gt;
      &lt;/section&gt;    
  &lt;/body&gt;
  &lt;/html&gt;​
  </code></pre>
  
  <p><strong>jQuery</strong>:</p>
  
  <pre><code>(function($) {
      var methods = {
          init : function(options) {
              var settings = {
                  callback: function() {}
              };
  
              if ( options ) {
                  $.extend( settings, options );
                  }
  
              $(":jqmData(role='page')").each(function() {
                  $(this).bind("swiperight", function() {
                      var nextPage = parseInt($(this).attr("id").split("page")[1]) - 1;
                      if (nextPage === 0) 
                          nextPage = 3;
  
                      $.mobile.changePage("#page"+nextPage, "slide");
                      });                        
  
                  $(this).bind("swipeleft", function() {
                      var nextPage = parseInt($(this).attr("id").split("page")[1]) +1;
                      if (nextPage === 4) 
                          nextPage = 1;
  
                      $.mobile.changePage("#page"+nextPage, "slide");
                  });
              })
          }
          }
  
      $.fn.initApp = function(method) {
          if ( methods[method] ) {
              return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
          } 
          else if ( typeof method === 'object' || ! method ) {
              return methods.init.apply( this, arguments );
          } 
          else {
              $.error( 'Method ' + method + ' does not exist' );
          }
      }
      })(jQuery);
  
  $(document).ready(function(){
      $().initApp();
  });
  ​
  </code></pre>