-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathexample.html
110 lines (103 loc) · 2.84 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
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
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example - Partial View Slider</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="cache-control" content="public">
<meta http-equiv="expires" content="2592000">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="dist/partialviewslider.css">
<style type="text/css">
/*reset*/
html{
font-size: 11px;
width: 100%;
overflow-x: hidden;
}
@media (min-width: 600px){
html{
font-size: 12px;
}
}
@media (min-width: 992px){
html{
font-size: 14px;
}
}
body{
margin: 0;
overflow-x: hidden;
}
img{
max-width: 100%;
}
i.material-icons{
vertical-align: sub;
font-size: 110%;
}
.container {
width: 95%;
max-width: 1300px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<ul id="partial-view">
<li>
<img src="src/img/img1.jpeg" />
</li>
<li>
<img src="src/img/img2.jpeg" />
</li>
<li>
<img src="src/img/img3.jpg" />
</li>
<li>
<img src="src/img/img4.jpeg" />
</li>
<li>
<img src="src/img/img5.jpeg" />
</li>
</ul>
<p>Photos by <a href="https://www.pexels.com/photo/long-exposure-photography-white-dome-building-interior-911758/">gdtography</a>, <a href="https://www.pexels.com/photo/aerial-photo-of-woman-wearing-white-and-blue-bikini-top-standing-on-swimming-pool-1243395/">antas singh</a>, <a href="https://www.pexels.com/photo/birds-on-air-near-snow-covered-mountain-surrounded-with-water-1398058/">Nathalie De Boever</a>, <a href="https://www.pexels.com/photo/statute-of-liberty-at-daytime-722014/">bruce mars</a>, <a href="https://www.pexels.com/photo/scenic-view-of-grand-canyon-1325862/">Ross Richardson</a> From <a href="https://www.pexels.com">PEXELS</a></p>
<button id="prev">Prev</button>
<button id="next">Next</button>
<button id="play">Play</button>
<button id="pause">Pause</button>
<p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
</div>
<script src="src/jquery-3.3.1.min.js"></script>
<script src="dist/partialviewslider.js"></script>
<script>
$(document).ready(function(){
var partialView = $('#partial-view').partialViewSlider({
backdrop: false,
perspective: true,
width: 70,
items: {
"0": 1,
"600": 2,
"992": 3
},
auto: false
});
$('#prev').on('click', function(){
partialView.prev();
});
$('#next').on('click', function(){
partialView.next();
});
$('#play').on('click', function(){
partialView.play();
});
$('#pause').on('click', function(){
partialView.pause();
});
});
</script>
</body>
</html>