forked from glidejs/glide
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
52 lines (44 loc) · 1.46 KB
/
index.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
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- Slider Plugin -->
<script type="text/javascript" src="jquery.glide.js"></script>
<style>
/**
* Demo styles
* Only for example purposes
* Remove in production
*/
/* Bad and ugly reset */
*{ margin: 0; padding: 0; border: 0; }
.box {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="slider">
<ul class="slides">
<li class="slide"><div class="box" style="background-color: #1abc9c;"></div></li>
<li class="slide"><div class="box" style="background-color: #16a085;"></div></li>
<li class="slide"><div class="box" style="background-color: #f1c40f;"></div></li>
<li class="slide"><div class="box" style="background-color: #f39c12;"></div></li>
<li class="slide"><div class="box" style="background-color: #d35400;"></div></li>
<li class="slide"><div class="box" style="background-color: #c0392b;"></div></li>
</ul>
</div>
<script type="text/javascript">
var glide = $('.slider').glide().data('api_glide');
$(window).on('keyup', function (key) {
if (key.keyCode === 13) {
glide.jump(3, console.log('Wooo!'));
};
});
$('.slider-arrow').on('click', function() {
console.log(glide.current());
});
</script>
</body>
</html>