This repository has been archived by the owner on Nov 27, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
145 lines (132 loc) · 4.55 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
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6 lte9 lte8 lte7 lte6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="ie7 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="ie8 lte9 lte8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie9 lte9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
<title>Simple Slider plugin</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="example/screen.css" rel="stylesheet" />
<link href="css/simpleslider.css" rel="stylesheet" />
<script src="js/jquery-1.11.0.js"></script>
<script src="js/jquery.simpleslider.js"></script>
<script>
$(function(){
$('#example-1').simpleSlider({
show: 3,
interval: 3,
size: 590,
orientation: 'horizontal',
clickevent: function(){
$(this).parent().find('li').stop().css({ opacity : 1 });
$(this).stop().css({ opacity : 0.4 });
return false;
}
});
$('#example-2').simpleSlider({
show: 3,
interval: 3,
size: 590,
orientation: 'vertical',
clickevent: function(){
$(this).parent().find('li').stop().css({ opacity : 1 });
$(this).stop().css({ opacity : 0.4 });
return false;
}
});
});
</script>
</head>
<body>
<article>
<h1>Simple Slider</h1>
<section class="intro">
<p>A jQuery plugin to create a slider out of an unordered list (or other items within a container)</p>
<p><a href="https://github.com/sneaknz/simpleslider">View on Github</a> | <a href="https://github.com/sneaknz/simpleslider/archive/master.zip">Download latest version</a></p>
</section>
<section class="container">
<h2>Examples </h2>
<p>Horizontal</p>
<ul id="example-1" class="slider">
<li><div class="box">1</div></li>
<li><div class="box">2</div></li>
<li><div class="box">3</div></li>
<li><div class="box">4</div></li>
<li><div class="box">5</div></li>
<li><div class="box">6</div></li>
<li><div class="box">7</div></li>
<li><div class="box">8</div></li>
</ul>
<p>Vertical</p>
<ul id="example-2" class="slider">
<li><div class="box">1</div></li>
<li><div class="box">2</div></li>
<li><div class="box">3</div></li>
<li><div class="box">4</div></li>
<li><div class="box">5</div></li>
<li><div class="box">6</div></li>
<li><div class="box">7</div></li>
<li><div class="box">8</div></li>
</ul>
<h2>Usage</h2>
<p>
Call the plugin on the parent element of the list/group. This doesn't have to
be an unordered list, so long as all direct children of the parent are items
belonging to the list or group.
</p>
<code><pre>$('.slider').simpleSlider({
show: 3,
interval: 3,
size: 590,
orientation: 'horizontal',
clickevent: function(){
$(this).parent().find('li').stop().css({ opacity : 1 });
$(this).stop().css({ opacity : 0.4 });
return false;
}
});</pre></code>
<h2>Options</h2>
<table>
<tr>
<th align="left" valign="top">show</th>
<td><em>Optional, Int</em>. How many items will be shown at once (default is 4)</td>
</tr>
<tr>
<th align="left" valign="top">interval</th>
<td><em>Optional, Int</em>. How many items to be scrolled on each prev/next click (default is 1)</td>
</tr>
<tr>
<th align="left" valign="top">children</th>
<td><em>Optional, String</em>. Child elements that will make up the slider items (default is 'li')</td>
</tr>
<tr>
<th align="left" valign="top">speed</th>
<td><em>Optional, Int</em>. Speed of animations, in milliseconds (default is 250)</td>
</tr>
<tr>
<th align="left" valign="top">prevlabel</th>
<td><em>Optional, String</em>. Label for previous sroll button (default is 'Prev')</td>
</tr>
<tr>
<th align="left" valign="top">nextlabel</th>
<td><em>Optional, String</em>. Label for next sroll button (default is 'Next')</td>
</tr>
<tr>
<th align="left" valign="top">size</th>
<td><em>Optional, Int</em>. Size dimension, used for width or height depending on orientation</td>
</tr>
<tr>
<th align="left" valign="top">orientation</th>
<td><em>Optional, String</em>. Orientation of the slider. Options are horizontal or vertical (default is 'horizontal')</td>
</tr>
<tr>
<th align="left" valign="top">clickevent</th>
<td><em>Optional, Function</em>. Callback for items when they are clicked. The clicked item is passed in with the callback.</td>
</tr>
</table>
</section>
</article>
</body>
</html>