-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathexample.html
77 lines (67 loc) · 5.86 KB
/
example.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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Swipable Scroller</title>
<style>
#swipable-wrap { width: 800px; height: 400px; position: relative; overflow: hidden; }
#swipeable { position: relative; white-space: nowrap; }
.swipable-box { width: 776px; height: 376px; padding: 10px; display: inline-block; overflow: hidden; white-space: normal; border: 2px solid #ccc;}
</style>
</head>
<body>
<div id="swipable-wrap">
<div id="swipeable">
<div class="swipable-box">
<h1>First Box</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at odio eu enim ullamcorper dictum. Nullam dignissim tincidunt odio ut euismod. Maecenas id lacus mauris. Phasellus tincidunt tempus tempus. Integer ut massa libero, sed rutrum diam. Aenean at viverra tellus. Cras nec lacus risus, quis aliquet lorem. Nulla quis lacus tellus. Quisque sollicitudin gravida felis, vitae euismod leo fermentum non. Curabitur id turpis sit amet sapien bibendum faucibus. Sed suscipit lorem ut nunc dictum elementum. Aenean eget magna et sem sagittis egestas et ut dolor. Duis erat erat, placerat a dapibus eu, tincidunt vitae neque.
</p>
<p>
Duis congue enim ut risus pulvinar a interdum dolor aliquet. Nam semper, arcu vitae euismod volutpat, nulla orci auctor urna, eget malesuada tellus risus aliquam ligula. In non orci lectus, vitae tristique arcu. In vitae vestibulum tortor. Mauris euismod aliquam leo, ac hendrerit libero ultrices vel. Aenean laoreet est vel nisl accumsan vel elementum tellus mollis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed sollicitudin, eros lacinia congue porttitor, odio neque pharetra sem, quis dapibus eros ipsum adipiscing metus. Praesent sit amet est eu enim tempor vulputate. Phasellus eget mi eget metus pulvinar laoreet eu nec nunc. Etiam ac justo velit, non lobortis mauris.
</p>
</div><div class="swipable-box">
<h1>Second Box</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at odio eu enim ullamcorper dictum. Nullam dignissim tincidunt odio ut euismod. Maecenas id lacus mauris. Phasellus tincidunt tempus tempus. Integer ut massa libero, sed rutrum diam. Aenean at viverra tellus. Cras nec lacus risus, quis aliquet lorem. Nulla quis lacus tellus. Quisque sollicitudin gravida felis, vitae euismod leo fermentum non. Curabitur id turpis sit amet sapien bibendum faucibus. Sed suscipit lorem ut nunc dictum elementum. Aenean eget magna et sem sagittis egestas et ut dolor. Duis erat erat, placerat a dapibus eu, tincidunt vitae neque.
</p>
<p>
Duis congue enim ut risus pulvinar a interdum dolor aliquet. Nam semper, arcu vitae euismod volutpat, nulla orci auctor urna, eget malesuada tellus risus aliquam ligula. In non orci lectus, vitae tristique arcu. In vitae vestibulum tortor. Mauris euismod aliquam leo, ac hendrerit libero ultrices vel. Aenean laoreet est vel nisl accumsan vel elementum tellus mollis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed sollicitudin, eros lacinia congue porttitor, odio neque pharetra sem, quis dapibus eros ipsum adipiscing metus. Praesent sit amet est eu enim tempor vulputate. Phasellus eget mi eget metus pulvinar laoreet eu nec nunc. Etiam ac justo velit, non lobortis mauris.
</p>
</div><div class="swipable-box">
<h1>Third Box</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at odio eu enim ullamcorper dictum. Nullam dignissim tincidunt odio ut euismod. Maecenas id lacus mauris. Phasellus tincidunt tempus tempus. Integer ut massa libero, sed rutrum diam. Aenean at viverra tellus. Cras nec lacus risus, quis aliquet lorem. Nulla quis lacus tellus. Quisque sollicitudin gravida felis, vitae euismod leo fermentum non. Curabitur id turpis sit amet sapien bibendum faucibus. Sed suscipit lorem ut nunc dictum elementum. Aenean eget magna et sem sagittis egestas et ut dolor. Duis erat erat, placerat a dapibus eu, tincidunt vitae neque.
</p>
<p>
Duis congue enim ut risus pulvinar a interdum dolor aliquet. Nam semper, arcu vitae euismod volutpat, nulla orci auctor urna, eget malesuada tellus risus aliquam ligula. In non orci lectus, vitae tristique arcu. In vitae vestibulum tortor. Mauris euismod aliquam leo, ac hendrerit libero ultrices vel. Aenean laoreet est vel nisl accumsan vel elementum tellus mollis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed sollicitudin, eros lacinia congue porttitor, odio neque pharetra sem, quis dapibus eros ipsum adipiscing metus. Praesent sit amet est eu enim tempor vulputate. Phasellus eget mi eget metus pulvinar laoreet eu nec nunc. Etiam ac justo velit, non lobortis mauris.
</p>
</div>
</div>
</div>
<button id="prev">Previous</button>
<button id="next">Next</button>
<button id="to3">3</button>
<button id="to3_i">to 3 Instant</button>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.scroller.js"></script>
<script type="text/javascript">
$('#swipeable').scroller({
"box_element" : '.swipable-box'
});
$('#next').click(function() {
$('#swipeable').scroller().next();
});
$('#prev').click(function() {
$('#swipeable').scroller().previous();
});
$('#to3').click(function() {
$('#swipeable').scroller().move_to(2);
});
$('#to3_i').click(function() {
$('#swipeable').scroller().move_to(2, true);
});
</script>
</body>
</html>