-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathswipeit.html
103 lines (102 loc) · 3.44 KB
/
swipeit.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta content="initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport">
<title>Scroll test page</title>
<script type="text/javascript" charset="utf-8">
window.__of_time = function() {
};
</script>
<script type="text/javascript" src="javascripts/jquery-1.6.1.js"></script>
<script type="text/javascript" src="javascripts/swipeit.js"></script>
<style type="text/css" media="screen">
body {
margin: 0;
padding: 0;
}
section {
margin: 0.5rem 0.5rem 1rem 0.5rem;
}
section h2 {
font-size: 18px;
font-weight: bold;
font-family: 'Palatino Linotype', Palatino, Palladio, 'URW Palladio L', 'Book Antiqua', Baskerville, 'Bookman Old Style', 'Bitstream Charter', 'Nimbus Roman No9 L', Garamond, 'Apple Garamond', 'ITC Garamond Narrow', 'New Century Schoolbook', 'Century Schoolbook', 'Century Schoolbook L', Georgia, serif;
margin: 0;
margin-left: 0.5rem;
line-height: 1;
}
.slides_wrapper {
overflow: hidden;
width: 1000px;
height: 328px;
margin: 0.5em 0.5em 1.5em 0.5em;
border: 5px solid black;
}
.slides {
list-style: none;
width: 3000px;
margin: 0;
padding: 0;
cursor: pointer;
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
.slide {
display: inline-block;
margin: 4px 0 4px 4px;
}
.slides_wrapper_flex .slides {
width: auto;
display: -webkit-box;
-webkit-box-align: stretch;
-webkit-box-orient: horizontal;
-webkit-box-pack: start;
}
.slides_wrapper_flex .slide {
display: block;
}
</style>
<style type="text/css" media="screen">
.slide_indicator {
position: relative;
bottom: 6px;
padding: 0;
left: 50%;
margin: 0;
width: 400px;
}
.slide_indicator li {
height: 8px;
width: 8px;
background: #bababa;
-webkit-border-radius: 5px;
border: 1px solid #656565;
display: inline-block;
margin-right: 6px;
}
.slide_indicator .current {
background: #50ad5a;
}
</style>
</head>
<body id="scroll-test-body">
<section id="screenshots-1">
<h2>SwipeIt</h2>
<div class="slides_wrapper slides_wrapper_flex">
<ul class="slides">
<li class="slide"><img class="img" alt="screenshot 1" src="images/1.png" draggable="false" width="480" height="320"></li>
<li class="slide"><img class="img" alt="screenshot 2" src="images/2.png" draggable="false" width="480" height="320"></li>
<li class="slide"><img class="img" alt="screenshot 3" src="images/3.png" draggable="false" width="480" height="320"></li>
<li class="slide"><img class="img" alt="screenshot 4" src="images/4.png" draggable="false" width="480" height="320"></li>
<li class="slide"><img class="img" alt="screenshot 5" src="images/5.png" draggable="false" width="480" height="320"></li>
</ul>
</div>
<ul class="slide_indicator"></ul>
</section>
<button id="bind">Bind gSwipe</button>
<script type="text/javascript" charset="utf-8">
$('#screenshots-1 .slides').swipeIt();
</script>
</body>
</html>