-
Notifications
You must be signed in to change notification settings - Fork 1
/
scrollability.html
76 lines (75 loc) · 2.77 KB
/
scrollability.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
<!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/scrollability.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: 100px;
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>
</head>
<body id="scroll-test-body">
<section id="screenshots-1">
<h2>Scrollability</h2>
<div class="slides_wrapper slides_wrapper_flex">
<ul class="slides scrollable horizontal">
<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>
</section>
</body>
</html>