forked from lemmon/Lemmon-Slider
/
demo.html
120 lines (109 loc) · 4.52 KB
/
demo.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
111
112
113
114
115
116
117
118
119
120
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
<title>Carousel With Variable Elements Widths | Lemmon jQuery</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="Jakub Pelák">
<meta name="robots" content="index, follow">
<script src="http://static.lemmonjuice.com/public/jquery/jquery-1.6.min.js"></script>
</head>
<body>
<div class="wrap">
<div id="slider1" class="slider">
<ul>
<li><div style="width:200px;height:160px;background:#2aa198;"> 1</div></li>
<li><div style="width:250px;height:160px;background:#268bd2;"> 2</div></li>
<li><div style="width:100px;height:160px;background:#6c71c4;"> 3</div></li>
<li><div style="width:170px;height:160px;background:#d33682;"> 4</div></li>
<li><div style="width:300px;height:160px;background:#dc322f;"> 5</div></li>
<li><div style="width:200px;height:160px;background:#cb4b16;"> 6</div></li>
<li><div style="width:250px;height:160px;background:#b58900;"> 7</div></li>
<li><div style="width:100px;height:160px;background:#859900;"> 8</div></li>
<li><div style="width:200px;height:160px;background:#2aa198;"> 9</div></li>
<li><div style="width:250px;height:160px;background:#268bd2;">10</div></li>
<li><div style="width:100px;height:160px;background:#6c71c4;">11</div></li>
<li><div style="width:170px;height:160px;background:#d33682;">12</div></li>
<li><div style="width:300px;height:160px;background:#dc322f;">13</div></li>
<li><div style="width:200px;height:160px;background:#cb4b16;">14</div></li>
<li><div style="width:250px;height:160px;background:#b58900;">15</div></li>
<li><div style="width:100px;height:160px;background:#859900;">16</div></li>
</ul>
</div>
<div class="controls">
<a href="#" class="prev-page">Prev Page</a> |
<a href="#" class="prev-slide">Prev Slide</a> |
<a href="#" class="next-slide">Next Slide</a> |
<a href="#" class="next-page">Next Page</a>
</div>
<h2> Adding Items to a Slider </h2>
You can now add items to a slider through a method 'addItems'
<br>
<div id="slider2" class="slider">
<ul>
<li><div style="width:200px;height:160px;background:#2aa198;"> 1</div></li>
<li><div style="width:250px;height:160px;background:#268bd2;"> 2</div></li>
</ul>
</div>
<div class="controls">
<a href="#" class="prev-page">Prev Page</a> |
<a href="#" class="prev-slide">Prev Slide</a> |
<a href="#" class="next-slide">Next Slide</a> |
<a href="#" class="next-page">Next Page</a>
</div>
<br>
Item to add:
<input id="addItem2" type="text" style="width:500px;" value='<li><div style="width:100px;height:160px;background:#6c71c4;">new</div></li>'>
<button id="add-to-slider2">Add it!</button>
You can now also prepend items into the slider
<br>
<div id="slider3" class="slider">
<ul>
<li><div style="width:200px;height:160px;background:#2aa198;"> 1</div></li>
<li><div style="width:250px;height:160px;background:#268bd2;"> 2</div></li>
</ul>
</div>
<div class="controls">
<a href="#" class="prev-page">Prev Page</a> |
<a href="#" class="prev-slide">Prev Slide</a> |
<a href="#" class="next-slide">Next Slide</a> |
<a href="#" class="next-page">Next Page</a>
</div>
<br>
Item to add:
<input id="addItem3" type="text" style="width:500px;" value='<li><div style="width:100px;height:160px;background:#6c71c4;">new</div></li>'>
<button id="add-to-slider3">Prepend it!</button>
</div>
<script src="lemmon-slider.js"></script>
<script>
window.onload = function(){
// slider 1
$( '#slider1' ).lemmonSlider({
infinite: true
});
$( '#slider2' ).lemmonSlider({
infinite: true
});
$( '#slider3' ).lemmonSlider({
infinite: true
});
alert('OK');
}
$('#add-to-slider2').click(function(){
$('#slider2').lemmonSlider('addItem', {item: $('input#addItem2').val()});
})
$('#add-to-slider3').click(function(){
$('#slider3').lemmonSlider('addItem', {item: $('input#addItem3').val(), prepend: true});
})
</script>
<style type="text/css" media="screen">
.wrap { width:640px; margin:20px; background:#ffc; }
body div.slider { overflow:hidden; position:relative; width:100%; height:160px !important; }
body div.slider ul { margin:0; padding:0; height:160px; }
body div.slider li { float:left; list-style:none; margin:0 5px 0 0; }
body div.slider li { text-align:center; line-height:160px; font-size:25px; }
</style>
</body>
</html>