Swipe Content

Swipe Content

Hello the community ! 

In a first time i hope my question doesn't exist already, i don't found it.
And all my apologize if i doing some mistake... I'm french and not perfect in english..

I developing a Mobile version of a website and i want put in place a Swipe event for the content.

I don't what swipe all the page but only the content. I show you my page example.

  2. <body>

  4. <!-- **********************PAGE ONE************************ -->

  6. <div id="page1" data-role="page" data-theme="a" >
  7.        <div data-role="header" data-theme="b">
  8.                         Page 1
  9.        </div>
  10.        <div data-role="content">
  11. A content from page 1
  12.                         </div>
  13.        <div  data-role="footer" data-position="fixed" data-tap-toggle="false">
  14.         <a href="#page-one" data-icon="home" data-inline="true">Contact</a>
  15.        </div> 
  16.    </div>

  19. <!-- **********************PAGE TWO************************ -->

  21. <div id="page2" data-role="page" data-theme="a" >
  22.         <div data-role="header" data-theme="b">
  23.                         Page 2
  24.         </div>
  25.         <div data-role="content" prev-index="3" next-index="2">
  26. A content from page 2
  27.                         </div>
  29.                         <div id="content1" data-role="content" prev-index="1" next-index="3">
  30. A content from page 2
  31.                         </div>
  33.                         <div id="content2" data-role="content" prev-index="2" next-index="1">
  34. A content from page 2
  35.                         </div>
  36.         <div id="content3" data-role="footer" data-position="fixed" data-tap-toggle="false">
  37.          Footer
  38.         </div> 
  39.     </div>
    40.  

Is it possible ? At the start the content with ID= content2 and Content 3 is hide.
I want that the swipe change only the content and keep the header/Footer immobile.

Before i use a script like that, but this one change all the pages...

  2. $(document).ready(function() {
  3.             $("[data-role='page']").live('swiperight swipeleft', function(event) {
  4.                 var swipeindex = '';
  5.                 var reverseValue = false;
  6.                 if (event.type == "swiperight") {
  7.                     swipeindex = "#page" + $.mobile.activePage.data("prev-index");
  8.                     reverseValue = true;
  9.                 } else if (event.type == "swipeleft") {
  10.                     swipeindex = "#page" + $.mobile.activePage.data("next-index");
  11.                 }
  12.                 
  13.                 if (swipeindex != '#page') {
  14.                     $.mobile.changePage(swipeindex, { type : "get", transition : "slide", reverse : reverseValue });
  15.                 }
  16.                 event.preventDefault();
  17.             });
  18.         });

Thanks for help