This repository was archived by the owner on Mar 20, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 21
Expand file tree
/
Copy pathamd.html
More file actions
156 lines (127 loc) · 5.62 KB
/
amd.html
File metadata and controls
156 lines (127 loc) · 5.62 KB
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
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
<title>jQuery Slideshow</title>
<link rel="stylesheet" href="css/example.css" />
<link rel="stylesheet" href="css/pygments.css" />
<link rel="stylesheet" href="css/slideshow.css" />
<script src="http://raw.github.com/cujojs/curl/master/dist/curl/curl.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!--
jQuery Slideshow by Matt Hinchliffe <http://www.maketea.co.uk>
Find out more at GitHub <http://github.com/i-like-robots/jQuery-Slideshow>
-->
</head>
<body>
<div id="container">
<section id="introduction">
<h1>jQuery Slideshow</h1>
<p>
<a href="http://github.com/i-like-robots/jQuery-Slideshow">jQuery Slideshow</a> is a performant and
developer friendly image slideshow and content carousel plugin with support for touch gestures. 2KB when
gzipped. <a href="https://github.com/i-like-robots/jQuery-Slideshow/zipball/master">Download</a>.
</p>
<div id="example">
<div class="slideshow" data-transition="crossfade" data-loop="true" data-skip="false">
<ul class="carousel">
<li class="slide">
<img src="http://placebox.es/440/200/d97ef2/f5f5f5" alt="" width="440" height="200" />
</li>
<li class="slide">
<img src="http://placebox.es/440/200/50ac3d/f5f5f5" alt="" width="440" height="200" />
</li>
<li class="slide">
<img src="http://placebox.es/440/200/0a77bb/f5f5f5" alt="" width="440" height="200" />
</li>
</ul>
</div>
<p>
<label for="transition">Change the transition:</label>
<select name="transition" id="transition">
<option selected>crossfade</option>
<option>scroll</option>
</select>
</p>
<div class="slideshow" data-visible="4" data-pagination="false" data-offset="3">
<ul class="carousel">
<li class="slide">
<img src="http://placebox.es/110/110/d97ef2/f5f5f5" alt="" width="110" height="110" />
</li>
<li class="slide">
<img src="http://placebox.es/110/110/50ac3d/f5f5f5" alt="" width="110" height="110" />
</li>
<li class="slide">
<img src="http://placebox.es/110/110/0a77bb/f5f5f5" alt="" width="110" height="110" />
</li>
<li class="slide">
<img src="http://placebox.es/110/110/d97ef2/f5f5f5" alt="" width="110" height="110" />
</li>
<li class="slide">
<img src="http://placebox.es/110/110/50ac3d/f5f5f5" alt="" width="110" height="110" />
</li>
<li class="slide">
<img src="http://placebox.es/110/110/0a77bb/f5f5f5" alt="" width="110" height="110" />
</li>
<li class="slide">
<img src="http://placebox.es/110/110/d97ef2/f5f5f5" alt="" width="110" height="110" />
</li>
<li class="slide">
<img src="http://placebox.es/110/110/50ac3d/f5f5f5" alt="" width="110" height="110" />
</li>
<li class="slide">
<img src="http://placebox.es/110/110/0a77bb/f5f5f5" alt="" width="110" height="110" />
</li>
</ul>
</div>
</div>
</section>
<hr />
<section id="setup">
<h2>Setup</h2>
<p>
Setup is not restricted to a fixed markup pattern but is dependent on class names. Theoretically almost
any content can be placed within a slide. If you are using images always specify the width and height.
</p>
<figure>
<pre class="syntax"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"slideshow"</span><span class="nt">></span>
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"carousel"</span><span class="nt">></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"slide"</span><span class="nt">></span>…<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"slide"</span><span class="nt">></span>…<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"slide"</span><span class="nt">></span>…<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"></div></span></code>
</pre>
</figure>
<p>
The plugin is instantiated in the usual manner and an instances API can be accessed via element data.
</p>
<figure>
<pre class="syntax"><code><span class="c1">// Create slideshow instances</span>
<span class="kd">var</span> <span class="nx">$slideshow</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'.slideshow'</span><span class="p">).</span><span class="nx">slides</span><span class="p">(),</span>
<span class="c1">// Access an instance API</span>
<span class="nx">api</span> <span class="o">=</span> <span class="nx">$slideshow</span><span class="p">.</span><span class="nx">data</span><span class="p">(</span><span class="s1">'slides'</span><span class="p">);</span></code>
</pre>
</figure>
</section>
</div>
<a href="http://github.com/i-like-robots/jQuery-Slideshow">
<img style="position:absolute; top:0; right:0; border:0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" />
</a>
<script>
curl(['dist/slideshow'], function(Module) {
var $s = $('.slideshow').each(function(i, el) {
$.data(el, 'slides', new Module(el));
});
// Access an instance API
var api = $s.eq(0).data('slides');
// Transition select
$('select[name=transition]').on('change', function()
{
api.redraw( this.value );
});
});
</script>
</body>
</html>