Swipe 2 + jQuery Mobile

by Andy Bulka

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css">
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script src="https://raw.github.com/bradbirdsall/Swipe/swipe2/swipe.js"></script>
<div data-role="page" id="home" style='background:#fff'>

  <div data-role="header">
    <h1>Swipe 2 + jQuery Mobile</h1>
  </div>

  <div data-role="content" style='padding:0'>

    <div id='slider' class='swipe'>
      <div class='swipe-wrap'>
        <div><span>1</span></div>
        <div><span>2</span></div>
        <div><span>3</span></div>
        <div><span>4</span></div>
        <div><span>5</span></div>
      </div>
    </div> <!-- /slider -->

    <h3 style='padding:0 15px'>Swipe2 and jQMobile playing nice :)</h3>


  </div> <!-- /content -->
</div> <!-- /page -->

CSS

/* Swipe 2 required styles */

.swipe {
  overflow: hidden;
  visibility: hidden;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap div {
  float:left;
  width:100%;
  position: relative;
}

/* END required styles */

#slider {
  background:#414141;
}
.swipe-wrap > div > span {
  display:block;
  background:#1db1ff;
  font-weight:bold;
  color:#fff;
  font-size:20px;
  text-align:center;
  margin:15px 14px 16px;
  padding:100px 10px;
  border-radius:3px;
  text-shadow:none;
}

JavaScript

$('#home').live('pageshow',function(){

  window.slider = new Swipe(document.getElementById('slider'));

});