95 lines
1.8 KiB
HTML
Executable File
95 lines
1.8 KiB
HTML
Executable File
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<title>Swipe 2</title>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=8">
|
|
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/>
|
|
<link href='style.css' rel='stylesheet'/>
|
|
<style>
|
|
|
|
/* Swipe 2 required styles */
|
|
|
|
.swipe {
|
|
overflow: hidden;
|
|
visibility: hidden;
|
|
position: relative;
|
|
}
|
|
.swipe-wrap {
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.swipe-wrap > div {
|
|
float:left;
|
|
width:100%;
|
|
position: relative;
|
|
}
|
|
|
|
/* END required styles */
|
|
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<h1>Swipe 2</h1>
|
|
|
|
|
|
|
|
<div id='mySwipe' style='max-width:500px;margin:0 auto' class='swipe'>
|
|
<div class='swipe-wrap'>
|
|
<div><b>0</b></div>
|
|
<div><b>1</b></div>
|
|
<div><b>2</b></div>
|
|
<div><b>3</b></div>
|
|
<div><b>4</b></div>
|
|
<div><b>5</b></div>
|
|
<div><b>6</b></div>
|
|
<div><b>7</b></div>
|
|
<div><b>8</b></div>
|
|
<div><b>9</b></div>
|
|
<div><b>10</b></div>
|
|
<div><b>11</b></div>
|
|
<div><b>12</b></div>
|
|
<div><b>13</b></div>
|
|
<div><b>14</b></div>
|
|
<div><b>15</b></div>
|
|
<div><b>16</b></div>
|
|
<div><b>17</b></div>
|
|
<div><b>18</b></div>
|
|
<div><b>19</b></div>
|
|
<div><b>20</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>
|
|
|
|
|
|
|
|
|
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
|
<script src='swipe.js'></script>
|
|
<script>
|
|
|
|
// pure JS
|
|
var elem = document.getElementById('mySwipe');
|
|
window.mySwipe = Swipe(elem, {
|
|
// startSlide: 4,
|
|
// auto: 3000,
|
|
// continuous: true,
|
|
// disableScroll: true,
|
|
// stopPropagation: true,
|
|
// callback: function(index, element) {},
|
|
// transitionEnd: function(index, element) {}
|
|
});
|
|
|
|
// with jQuery
|
|
// window.mySwipe = $('#mySwipe').Swipe().data('Swipe');
|
|
|
|
</script> |