title: jQuery mobile swipe content only
body: <p>So I used the jquery mobile ui to do a page, swipe left/right, now this dosen't work for me since I just want to swipe only the content, not the entery body of the page, I tried to use <code>data-role="content"</code> but It doesn't work anymore only with <code>data-role="page"</code> is it posibile to have that swipe animation, but only for the content?</p>
  
  <p>I have some <code>&lt;article&gt;</code> and I want to swipe them left/right....but I don't want to swipe the header and other things..just the middle section.</p>
  
  <p>And also to disable that stupid jquery mobile theme if posibile.</p>
  
  <p>//Le</p>
  
  <p>Code structure</p>
  
  <pre><code>&lt;header data-role="header"&gt; .... &lt;/header&gt;
   &lt;section&gt;
    &lt;!-- only this part I want to swipe, one article at a time --&gt;
    &lt;article data-role="page"&gt; .....  &lt;/article&gt;
    &lt;article data-role="page"&gt; .....  &lt;/article&gt;
    &lt;article data-role="page"&gt; .....  &lt;/article&gt;
    &lt;article data-role="page"&gt; .....  &lt;/article&gt;
    &lt;!-- only this part I want to swipe, one article at a time --&gt;
  &lt;/section&gt;
  &lt;footer&gt; ... &lt;/footer&gt;
  
    $('article').bind("swipeleft", function(){
      var nextpage = $(this).next('article[data-role="page"]');
      // swipe using id of next page if exists
      if (nextpage.length &gt; 0) {
        $.mobile.changePage(nextpage, {transition: "slide",
      reverse: false}, true, true);
      }
  
    });
  
    $('article').bind("swiperight", function(){
      var prevpage = $(this).prev('article[data-role="page"]');
      if (prevpage.length &gt; 0) {
      $.mobile.changePage(prevpage, {transition: "slide",
      reverse: true}, true, true);
      }
  
    });
  </code></pre>