Here is a functional example you can check out: http://jsfiddle.net/Gajotres/d9Qnu/
Javascript :
var elem = document.getElementById('mySwipe');
var bullets = document.getElementById('position').getElementsByTagName('li');
window.mySwipe = Swipe(elem, {
continuous: true,
callback: function(pos) {
var i = bullets.length;
while (i--) {
bullets[i].className = ' ';
}
bullets[pos].className = 'on';
}
});
HTML :
<div id="slider" data-role="page">
<div data-role="content" id="contentSlider">
<div id='mySwipe' style='min-width:500px; margin:0 auto' class='swipe'>
<div class='swipe-wrap'>
<div><b>1</b>
</div>
<div><b>2</b>
</div>
<div><b>3</b>
</div>
</div>
</div>
<div style='text-align:center;padding-top:20px;'>
<button onclick='mySwipe.prev()'>prev</button>
<button onclick='mySwipe.next()'>next</button>
</div>
</div>
<nav data-theme="a" data-role="footer" data-position="fixed" id="footer">
<ul id='position'>
<li class='on'></li>
<li></li>
<li></li>
</ul>
</nav>
</div>
CSS :
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, del, dfn, em, img, ins, kbd, q, samp, small, strong, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td, article, aside, footer, header, nav, section {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
-webkit-text-size-adjust:none;
font-family:sans-serif;
min-height:416px;
}
h1 {
font-size:33px;
margin:50px 0 15px;
text-align:center;
color:#212121;
}
h2 {
font-size:14px;
font-weight:bold;
color:#3c3c3c;
margin:20px 10px 10px;
}
small {
margin:0 10px 30px;
display:block;
font-size:12px;
}
a {
margin:0 0 0 10px;
font-size:12px;
color:#3c3c3c;
}
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
width:80%;
}
.swipe-wrap > div {
float:left;
width:100%;
position: relative;
}
html, body {
background: #f3f3f3;
}
#console {
font-size: 12px;
font-family:"Inconsolata", "Monaco", "Consolas", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
color: #999;
line-height: 18px;
margin-top: 20px;
max-height: 150px;
overflow: auto;
}
#mySwipe div b {
display:block;
font-weight:bold;
color:#14ADE5;
font-size:20px;
text-align:center;
margin:10px;
padding:100px 10px;
box-shadow: 0 1px #EBEBEB;
background: #fff;
border-radius: 3px;
border: 1px solid;
border-color: #E5E5E5 #D3D3D3 #B9C1C6;
}
#footer {
height: 50px;
}
#position {
margin-left: auto;
margin-right: auto;
width: 60px;
}
#position li {
display:inline-block;
width:10px;
height:10px;
border-radius:10px;
background:#141414;
box-shadow:inset 0 1px 3px black,0 0 1px 1px #202020;
margin:0 2px;
cursor:pointer;
}
#position li.on{
box-shadow:inset 0 1px 3px -1px #28b4ea,0 1px 2px rgba(0,0,0,.5);
background-color:#1293dc;
background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#1293dc),color-stop(100%,#0f6297));
background-image:-webkit-linear-gradient(top,#1293dc,#0f6297);
background-image:-moz-linear-gradient(top,#1293dc,#0f6297);
background-image:-ms-linear-gradient(top,#1293dc,#0f6297);
background-image:-o-linear-gradient(top,#1293dc,#0f6297);
background-image:linear-gradient(top,#1293dc,#0f6297);
}