-
Notifications
You must be signed in to change notification settings - Fork 58
/
index.html
315 lines (312 loc) · 70.8 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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>jQuery jCarousel Lite Plugin</title>
<style>
html,
body {
margin: 0;
padding: 0;
border-width: 0;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
width: 94%;
margin: 0 auto;
padding: 0 3%;
max-width: 1120px;
font-size: 1em;
line-height: 1.5;
background-color: #fff;
color: #242424;
}
pre {
background-color: #f3f3f3;
padding: .25em;
border: 1px solid #ccc;
font-size: .9em;
overflow: auto;
}
code {
font-family: Monaco, Courier, monospace;
}
.comment,
.comments {
color: #aaa;
}
.keyword {
color: blue;
}
.string {
color: #090;
}
.number {
color: #099;
}
td.gutter {
text-align: right;
padding-right: 3px;
padding-left: 3px;
background-color: #ddd;
color: #aaa;
}
td.code {
padding-left: 5px;
}
h1, h2, h3 {
font-weight: normal;
color: #141414;
}
h2 {
padding-bottom: .2em;
border-bottom: 1px solid #ccc;
}
.right {
float: right;
}
</style>
</head>
<body>
<div class="right"><a href="demo/index.html">Demo</a></div>
<h1 id="jcarousellite">jCarouselLite</h1>
<p>By <a href="https://karlswedberg.com/">Karl Swedberg</a>, based on the original by <a href="gmarwaha.com">Ganeshji Marwaha</a>.</p>
<p>This jQuery plugin creates a carousel-style navigation widget for images, or any content, from simple HTML markup.</p>
<h2 id="related-projects">Related Projects</h2>
<p>Because jCarouselLite is relatively "light," it doesn't include a number of features that you might want for your project.
Also, the responsive feature is a little hacky. If the plugin doesn't suit your needs, please consider one of the following:</p>
<ul>
<li><a href="http://jquery.malsup.com/cycle2/">Cycle2</a> by Mike Alsup</li>
<li><a href="http://kenwheeler.github.io/slick/">Slick Carousel</a> by Ken Wheeler</li>
</ul>
<h2 id="installation">Installation</h2>
<p>Choose one of the following ways to put the plugin in your project:</p>
<ul>
<li>Via bower: <code>bower install jquery-carousel-lite</code></li>
<li>Via npm: <code>npm install jcarousellite</code></li>
<li>Via github: Download <a href="https://github.com/kswedberg/jquery-carousel-lite/blob/master/jcarousellite.js">https://github.com/kswedberg/jquery-carousel-lite/blob/master/jcarousellite.js</a> and place it somewhere in your project</li>
<li>Via rawgit: Directly reference the file with <code><script src="https://rawgit.com/kswedberg/jquery-carousel-lite/master/jcarousellite.js"></code></li>
</ul>
<h2 id="getting-started">Getting Started</h2>
<h3 id="html">HTML</h3>
<p>The HTML markup to build the carousel can be as simple as the following:</p>
<pre><code class="language-html"><div id="highlighter_296314" class="syntaxhighlighter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div><div class="line number6 index5 alt1">6</div><div class="line number7 index6 alt2">7</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain"><</code><code class="keyword">div</code> <code class="color1">class</code><code class="plain">=</code><code class="string">"carousel"</code><code class="plain">></code></div><div class="line number2 index1 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">ul</code><code class="plain">></code></div><div class="line number3 index2 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">li</code><code class="plain">><</code><code class="keyword">img</code> <code class="color1">src</code><code class="plain">=</code><code class="string">"image/1.jpg"</code> <code class="color1">alt</code><code class="plain">=</code><code class="string">"1"</code><code class="plain">></</code><code class="keyword">li</code><code class="plain">></code></div><div class="line number4 index3 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">li</code><code class="plain">><</code><code class="keyword">img</code> <code class="color1">src</code><code class="plain">=</code><code class="string">"image/2.jpg"</code> <code class="color1">alt</code><code class="plain">=</code><code class="string">"2"</code><code class="plain">></</code><code class="keyword">li</code><code class="plain">></code></div><div class="line number5 index4 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">li</code><code class="plain">><</code><code class="keyword">img</code> <code class="color1">src</code><code class="plain">=</code><code class="string">"image/3.jpg"</code> <code class="color1">alt</code><code class="plain">=</code><code class="string">"3"</code><code class="plain">></</code><code class="keyword">li</code><code class="plain">></code></div><div class="line number6 index5 alt1"><code class="undefined spaces"> </code><code class="plain"></</code><code class="keyword">ul</code><code class="plain">></code></div><div class="line number7 index6 alt2"><code class="plain"></</code><code class="keyword">div</code><code class="plain">></code></div></div></td></tr></tbody></table></div>
</code></pre>
<p>This snippet is nothing but a simple div containing an unordered list of images.
The "carousel" class for the div here is <strong>just for the sake of explanation</strong>.
You can use any class — or none at all — for any of the elements.</p>
<p>To manually navigate the elements of the carousel, you can include some kind of navigation buttons.
For example, you can have a "previous" button to go backward and a "next" button to go forward.
They need not be part of the carousel <code>div</code> itself; they can be any element in your document.
For example, let's assume you want the following elements to be used as prev and next buttons:</p>
<pre><code class="language-html"><div id="highlighter_886950" class="syntaxhighlighter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain"><</code><code class="keyword">button</code> <code class="color1">class</code><code class="plain">=</code><code class="string">'prev'</code><code class="plain">> » </</code><code class="keyword">button</code><code class="plain">></code></div><div class="line number2 index1 alt1"><code class="plain"><</code><code class="keyword">button</code> <code class="color1">class</code><code class="plain">=</code><code class="string">'next'</code><code class="plain">> « </</code><code class="keyword">button</code><code class="plain">></code></div></div></td></tr></tbody></table></div>
</code></pre>
<h3 id="css">CSS</h3>
<p>With the default settings, the carousel probably needs only a single CSS rule in your stylesheet
(again, using <code><div class="carousel"></code> as our example):</p>
<pre><code class="language-css"><div id="highlighter_565741" class="syntaxhighlighter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">div.carousel {</code></div><div class="line number2 index1 alt1"><code class="undefined spaces"> </code><code class="keyword">overflow</code><code class="plain">: </code><code class="value">hidden</code><code class="plain">;</code></div><div class="line number3 index2 alt2"><code class="plain">}</code></div></div></td></tr></tbody></table></div>
</code></pre>
<h3 id="jquery">jQuery</h3>
<p>All you need to do is call the carousel component on the <code>div</code> element that represents it and pass in the
navigation buttons as options.</p>
<pre><code class="language-javascript"><div id="highlighter_915606" class="syntaxhighlighter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$(</code><code class="string">'div.carousel'</code><code class="plain">).jCarouselLite({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces"> </code><code class="plain">btnNext: </code><code class="string">'.next'</code><code class="plain">,</code></div><div class="line number3 index2 alt2"><code class="undefined spaces"> </code><code class="plain">btnPrev: </code><code class="string">'.prev'</code></div><div class="line number4 index3 alt1"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
</code></pre>
<p>There are quite a few other settings that you can use to customize it. Each will be explained with an example below.</p>
<ul>
<li><a href="#options">Options</a></li>
<li><a href="#callbacks">Callback Options</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#responsive-carousels">Responsive Carousels</a></li>
</ul>
<h2 id="demo">Demo</h2>
<p>You can view a bare-bones demo at <a href="https://kswedberg.github.io/jquery-carousel-lite/demo/">kswedberg.github.io/jquery-carousel-lite/demo/</a></p>
<h2 id="options-">Options <a id="options"></h2>
<p>You can specify all the options shown below as object properties.</p>
<h3 id="containerselector--string---default-is-ul"><code>containerSelector</code> : string - default is "ul"</h3>
<p><em>New as of jCarouselLite 1.9.</em> Allows the "ul" container to be customized using any valid selector expression to match elements against. The plugin will use the <em>first</em> element within the carousel div that matches the selector.</p>
<pre><code class="language-javascript"><div id="highlighter_401297" class="syntaxhighlighter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$(</code><code class="string">'div.carousel'</code><code class="plain">).jCarouselLite({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces"> </code><code class="plain">containerSelector: </code><code class="string">'.my-slide-container'</code></div><div class="line number3 index2 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
</code></pre>
<h3 id="itemselector--string---default-is-li"><code>itemSelector</code> : string - default is "li"</h3>
<p><em>New as of jCarouselLite 1.9.</em> Allows the "li" slides to be customized using any valid selector expression to match elements against. The plugin will use elements that match the <code>itemSelector</code> string <strong>and</strong> are direct children of the <code>containerSelector</code>.</p>
<pre><code class="language-javascript"><div id="highlighter_227814" class="syntaxhighlighter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$(</code><code class="string">'div.carousel'</code><code class="plain">).jCarouselLite({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces"> </code><code class="plain">itemSelector: </code><code class="string">'.my-slide'</code></div><div class="line number3 index2 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
</code></pre>
<h3 id="responsive--boolean---default-is-false"><code>responsive</code> : Boolean - default is false</h3>
<p>New as of jCarouselLite 1.8. Allows the height and width of the carousel and its list items to be reset when the window size changes (if <code>autoCSS</code> and/or <code>autoWidth</code> set to <code>true</code>). Adds an event handler on the window resize event that triggers the <code>refreshCarousel</code> custom event when the window stops being resized. See <a href="#responsive-carousels">Responsive Carousels</a> for more information.</p>
<h3 id="swipe--boolean---default-is-true"><code>swipe</code> : Boolean - default is true</h3>
<p>New as of jCarouselLite 1.8. Enables the carousel to respond to touch input — namely single-touch swiping motions.</p>
<h3 id="swipethresholds--object---default-is--x-80-y-120-time-150-">swipeThresholds : Object - default is { x: 80, y: 120, time: 150 }</h3>
<p>New as of jCarouselLite 1.8 The three swipeThresholds properties refer to movement along the x and y axes (in pixels) and the duration of that movement (in milliseconds) from touch start to touch end. The combination of these properties determine when a directional swipe has occurred and, thus, when the carousel should scroll.</p>
<h3 id="preventtouchwindowscroll-boolean---default-is-true"><code>preventTouchWindowScroll</code>: Boolean - default is true</h3>
<p>When true (default), prevents vertical scrolling of the document window when swiping on a horizontal carousel.</p>
<h3 id="btnprev-btnnext--string---no-defaults"><code>btnPrev</code>, <code>btnNext</code> : String - no defaults</h3>
<p>Creates a basic carousel. Clicking "btnPrev" navigates backwards and "btnNext" navigates forward.</p>
<pre><code class="language-javascript"><div id="highlighter_754244" class="syntaxhighlighter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$(</code><code class="string">'div.carousel'</code><code class="plain">).jCarouselLite({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces"> </code><code class="plain">btnNext: </code><code class="string">'.next'</code><code class="plain">,</code></div><div class="line number3 index2 alt2"><code class="undefined spaces"> </code><code class="plain">btnPrev: </code><code class="string">'.prev'</code></div><div class="line number4 index3 alt1"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
</code></pre>
<h3 id="btngo--array--jquery-object---no-defaults"><code>btnGo</code> : array | jQuery object - no defaults</h3>
<p>You can use the <code>btnGo</code> option along with the <code>btnNext</code> / <code>btnPrev</code> buttons or instead of them.</p>
<p>If you supply an array, the index of each item in the array represents the index of the element in the carousel.
In other words, if the first element in the array is ".one," then clicking the element represented by ".one"
will slide the carousel to the first element.</p>
<pre><code class="language-javascript"><div id="highlighter_526920" class="syntaxhighlighter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$(</code><code class="string">'div.carousel'</code><code class="plain">).jCarouselLite({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces"> </code><code class="plain">btnNext: </code><code class="string">'.next'</code><code class="plain">,</code></div><div class="line number3 index2 alt2"><code class="undefined spaces"> </code><code class="plain">btnPrev: </code><code class="string">'.prev'</code><code class="plain">,</code></div><div class="line number4 index3 alt1"><code class="undefined spaces"> </code><code class="plain">btnGo: [</code><code class="string">'.one'</code><code class="plain">, </code><code class="string">'.two'</code><code class="plain">, </code><code class="string">'.three'</code><code class="plain">]</code></div><div class="line number5 index4 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
</code></pre>
<p>In the following example, clicking a link within <code>#carousel-nav</code> will slide the carousel to the item with an index matching the link's index among the other links.</p>
<pre><code class="language-javascript"><div id="highlighter_447452" class="syntaxhighlighter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$(</code><code class="string">'div.carousel'</code><code class="plain">).jCarouselLite({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces"> </code><code class="plain">btnGo: $(</code><code class="string">'#carousel-nav a'</code><code class="plain">)</code></div><div class="line number3 index2 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
</code></pre>
<h3 id="autocss--boolean---default-is-true"><code>autoCSS</code> : Boolean - default is true</h3>
<p>When the <code>autoCSS</code> option is set to <code>false</code>, the plugin does <em>not</em> set any of the initial styles on the carousel elements, allowing you to apply these styles (or a subset of them) yourself in a stylesheet.</p>
<pre><code class="language-javascript"><div id="highlighter_298104" class="syntaxhighlighter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$(</code><code class="string">'div.carousel'</code><code class="plain">).jCarouselLite({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces"> </code><code class="plain">autoCSS: </code><code class="keyword">false</code></div><div class="line number3 index2 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
</code></pre>
<p>The following is a generic example of styles set by the plugin when the default <code>autoCSS: true</code> is used.</p>
<pre><code class="language-css"><div id="highlighter_621031" class="syntaxhighlighter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div><div class="line number6 index5 alt1">6</div><div class="line number7 index6 alt2">7</div><div class="line number8 index7 alt1">8</div><div class="line number9 index8 alt2">9</div><div class="line number10 index9 alt1">10</div><div class="line number11 index10 alt2">11</div><div class="line number12 index11 alt1">12</div><div class="line number13 index12 alt2">13</div><div class="line number14 index13 alt1">14</div><div class="line number15 index14 alt2">15</div><div class="line number16 index15 alt1">16</div><div class="line number17 index16 alt2">17</div><div class="line number18 index17 alt1">18</div><div class="line number19 index18 alt2">19</div><div class="line number20 index19 alt1">20</div><div class="line number21 index20 alt2">21</div><div class="line number22 index21 alt1">22</div><div class="line number23 index22 alt2">23</div><div class="line number24 index23 alt1">24</div><div class="line number25 index24 alt2">25</div><div class="line number26 index25 alt1">26</div><div class="line number27 index26 alt2">27</div><div class="line number28 index27 alt1">28</div><div class="line number29 index28 alt2">29</div><div class="line number30 index29 alt1">30</div><div class="line number31 index30 alt2">31</div><div class="line number32 index31 alt1">32</div><div class="line number33 index32 alt2">33</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">/* the selectors here (div, ul, li) are meant only for example.</code></div><div class="line number2 index1 alt1"><code class="undefined spaces"> </code><code class="comments">you would, of course, use more specific selectors</code></div><div class="line number3 index2 alt2"><code class="undefined spaces"> </code><code class="comments">to target your actual carousel elements */</code></div><div class="line number4 index3 alt1"> </div><div class="line number5 index4 alt2"><code class="plain">div {</code></div><div class="line number6 index5 alt1"><code class="undefined spaces"> </code><code class="keyword">visibility</code><code class="plain">: </code><code class="value">visible</code><code class="plain">;</code></div><div class="line number7 index6 alt2"><code class="undefined spaces"> </code><code class="keyword">position</code><code class="plain">: </code><code class="value">relative</code><code class="plain">;</code></div><div class="line number8 index7 alt1"><code class="undefined spaces"> </code><code class="keyword">z-index</code><code class="plain">: </code><code class="value">2</code><code class="plain">;</code></div><div class="line number9 index8 alt2"><code class="undefined spaces"> </code><code class="comments">/* if the vertical option is set to true, the following would be height */</code></div><div class="line number10 index9 alt1"><code class="undefined spaces"> </code><code class="keyword">width</code><code class="plain">: XXX </code><code class="comments">/* calculated: width of the first li * number of visible items */</code><code class="plain">;</code></div><div class="line number11 index10 alt2"><code class="plain">}</code></div><div class="line number12 index11 alt1"> </div><div class="line number13 index12 alt2"><code class="plain">ul {</code></div><div class="line number14 index13 alt1"><code class="undefined spaces"> </code><code class="keyword">margin</code><code class="plain">: </code><code class="value">0</code><code class="plain">;</code></div><div class="line number15 index14 alt2"><code class="undefined spaces"> </code><code class="keyword">padding</code><code class="plain">: </code><code class="value">0</code><code class="plain">;</code></div><div class="line number16 index15 alt1"><code class="undefined spaces"> </code><code class="keyword">position</code><code class="plain">: </code><code class="value">relative</code><code class="plain">;</code></div><div class="line number17 index16 alt2"><code class="undefined spaces"> </code><code class="keyword">list-style-type</code><code class="plain">: </code><code class="value">none</code><code class="plain">;</code></div><div class="line number18 index17 alt1"><code class="undefined spaces"> </code><code class="keyword">z-index</code><code class="plain">: </code><code class="value">1</code><code class="plain">;</code></div><div class="line number19 index18 alt2"> </div><div class="line number20 index19 alt1"><code class="undefined spaces"> </code><code class="comments">/* if the vertical option is set to true, the following would be height */</code></div><div class="line number21 index20 alt2"><code class="undefined spaces"> </code><code class="comments">/* can be any number larger than total combined width of list items */</code></div><div class="line number22 index21 alt1"><code class="undefined spaces"> </code><code class="keyword">width</code><code class="plain">: XXX </code><code class="comments">/* calculated: width of the first li * total number of list items */</code><code class="plain">;</code></div><div class="line number23 index22 alt2"> </div><div class="line number24 index23 alt1"><code class="undefined spaces"> </code><code class="comments">/* if the vertical option is set to true, the following would be margin-top */</code></div><div class="line number25 index24 alt2"><code class="undefined spaces"> </code><code class="keyword">margin-left</code><code class="plain">: -XXX </code><code class="comments">/* calculdated: -starting item * width of first li */</code><code class="plain">;</code></div><div class="line number26 index25 alt1"><code class="plain">}</code></div><div class="line number27 index26 alt2"> </div><div class="line number28 index27 alt1"><code class="plain">li {</code></div><div class="line number29 index28 alt2"><code class="undefined spaces"> </code><code class="keyword">overflow</code><code class="plain">: </code><code class="value">visible</code> <code class="comments">/* if vertical: true, overflow is hidden */</code><code class="plain">;</code></div><div class="line number30 index29 alt1"><code class="undefined spaces"> </code><code class="keyword">float</code><code class="plain">: </code><code class="value">left</code> <code class="comments">/* if vertical: true, float is none */</code><code class="plain">;</code></div><div class="line number31 index30 alt2"><code class="undefined spaces"> </code><code class="keyword">width</code><code class="plain">: XXX </code><code class="comments">/*calculated: width of the first li */</code></div><div class="line number32 index31 alt1"><code class="undefined spaces"> </code><code class="keyword">height</code><code class="plain">: XXX </code><code class="comments">/*calculated: height of the first li */</code></div><div class="line number33 index32 alt2"><code class="plain">}</code></div></div></td></tr></tbody></table></div>
</code></pre>
<h3 id="autowidth-boolean---default-is-false"><code>autoWidth</code>: Boolean - default is false</h3>
<p>When the <code>autoWidth</code> option is set to <code>true</code>, the plugin sets the width of
the <code><li></code>s and left/top of the <code><ul></code> based on the width of the <code><div></code></p>
<h3 id="btndisabledclass-string---default-is-disabled"><code>btnDisabledClass</code>: String - default is "disabled"</h3>
<p>The <code>btnDisabledClass</code> value is automatically added to the <code>btnPrev</code> or <code>btnNext</code> element when a non-circular carousel is at the first or last slide, respectively.</p>
<h3 id="activeclass--string---default-is-active"><code>activeClass</code> : String - default is "active"</h3>
<p>The <code>activeClass</code> value is automatically added to the active slide's class. This allows customized animations within the <code>beforeStart</code> and <code>beforeEnd</code> callback options.</p>
<p>When the <code>btnGo</code> option is set, the element in the <code>btnGo</code> set that corresponds to the first currently visible carousel item will have a class added to it. The default <code>activeClass</code> is "active," but this can be overridden as shown in the following example:</p>
<pre><code class="language-javascript"><div id="highlighter_950696" class="syntaxhighlighter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$(</code><code class="string">'div.carousel'</code><code class="plain">).jCarouselLite({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces"> </code><code class="plain">btnGo: $(</code><code class="string">'#carousel-nav a'</code><code class="plain">),</code></div><div class="line number3 index2 alt2"><code class="undefined spaces"> </code><code class="plain">visible: 2,</code></div><div class="line number4 index3 alt1"><code class="undefined spaces"> </code><code class="plain">activeClass: </code><code class="string">'current'</code></div><div class="line number5 index4 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
</code></pre>
<h3 id="visibleclass--string---default-is-vis"><code>visibleClass</code> : String - default is "vis"</h3>
<p>When the <code>btnGo</code> option is set, the element in the <code>btnGo</code> set that corresponds to the currently visible carousel item(s) will have a class added to them. The default <code>visibleClass</code> is "vis," but this can be overridden as shown in the following example:</p>
<pre><code class="language-javascript"><div id="highlighter_689305" class="syntaxhighlighter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$(</code><code class="string">'div.carousel'</code><code class="plain">).jCarouselLite({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces"> </code><code class="plain">btnGo: $(</code><code class="string">'#carousel-nav a'</code><code class="plain">),</code></div><div class="line number3 index2 alt2"><code class="undefined spaces"> </code><code class="plain">visible: 2,</code></div><div class="line number4 index3 alt1"><code class="undefined spaces"> </code><code class="plain">visibleClass: </code><code class="string">'highlight'</code></div><div class="line number5 index4 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
</code></pre>
<h3 id="auto--boolean--number---default-is-false-meaning-automatic-scrolling-is-disabled-by-default"><code>auto</code> : Boolean | Number - default is false, meaning automatic scrolling is disabled by default</h3>
<p>The carousel will navigate by itself if this option is set to <code>true</code> or a number greater than 0. If <code>true</code>, the carousel will scroll by the number of slides indicated by the <code>scroll</code> option (default is 1). If a positive number, it will auto-scroll by that number instead, although clicks on the previous/next button will still cause it to scroll by the <code>scroll</code> option's number.</p>
<pre><code class="language-javascript"><div id="highlighter_572670" class="syntaxhighlighter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$(</code><code class="string">'div.carousel'</code><code class="plain">).jCarouselLite({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces"> </code><code class="plain">auto: </code><code class="keyword">true</code><code class="plain">,</code></div><div class="line number3 index2 alt2"><code class="undefined spaces"> </code><code class="plain">speed: 500</code></div><div class="line number4 index3 alt1"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
</code></pre>
<pre><code class="language-javascript"><div id="highlighter_787186" class="syntaxhighlighter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div><div class="line number6 index5 alt1">6</div><div class="line number7 index6 alt2">7</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$(</code><code class="string">'div.carousel'</code><code class="plain">).jCarouselLite({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces"> </code><code class="plain">auto: 2,</code></div><div class="line number3 index2 alt2"><code class="undefined spaces"> </code><code class="plain">scroll: 1,</code></div><div class="line number4 index3 alt1"><code class="undefined spaces"> </code><code class="plain">visible: 2,</code></div><div class="line number5 index4 alt2"><code class="undefined spaces"> </code><code class="plain">btnNext: </code><code class="string">'.next'</code><code class="plain">,</code></div><div class="line number6 index5 alt1"><code class="undefined spaces"> </code><code class="plain">btnPrev: </code><code class="string">'.prev'</code></div><div class="line number7 index6 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
</code></pre>
<h3 id="pause-boolean---default-is-true"><code>pause</code>: Boolean - default is true</h3>
<p>When both <code>pause</code> and <code>auto</code> are <code>true</code>, scrolling will pause when the mouse enters the carousel and resume when the mouse leaves the carousel.</p>
<h3 id="directional-boolean---default-is-false"><code>directional</code>: Boolean - default is false</h3>
<p>If the <code>directional</code> option is set to <code>true</code>, autoscrolling changes direction when the user clicks the "previous" or "next" button</p>
<h3 id="timeout--number---default-is-4000"><code>timeout</code> : Number - default is 4000</h3>
<p>When the <code>auto</code> option is set to <code>true</code> (or a number greater than 0), the carousel automatically transitions after the amount of time specified by the <code>timeout</code> option.</p>
<pre><code class="language-javascript"><div id="highlighter_698363" class="syntaxhighlighter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$(</code><code class="string">'div.carousel'</code><code class="plain">).jCarouselLite({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces"> </code><code class="plain">auto: </code><code class="keyword">true</code><code class="plain">,</code></div><div class="line number3 index2 alt2"><code class="undefined spaces"> </code><code class="plain">timeout: 8000</code></div><div class="line number4 index3 alt1"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
</code></pre>
<h3 id="autostop--number---default-is-infinity"><code>autoStop</code> : Number - default is Infinity</h3>
<p>The number of iterations before an auto carousel will stop automatically advancing. If the <code>circular</code> option is set to <code>false</code>, the carousel will not continue advancing after the last item has been reached, even if the number of iterations has not yet reached the <code>autoStop</code> value.</p>
<h3 id="speed--number---default-is-200"><code>speed</code> : Number - default is 200</h3>
<p>Specifying a speed will slow down or speed up the sliding speed of your carousel. Providing 0 will remove the slide effect.</p>
<pre><code class="language-javascript"><div id="highlighter_714087" class="syntaxhighlighter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$(</code><code class="string">'div.carousel'</code><code class="plain">).jCarouselLite({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces"> </code><code class="plain">btnNext: </code><code class="string">'.next'</code><code class="plain">,</code></div><div class="line number3 index2 alt2"><code class="undefined spaces"> </code><code class="plain">btnPrev: </code><code class="string">'.prev'</code><code class="plain">,</code></div><div class="line number4 index3 alt1"><code class="undefined spaces"> </code><code class="plain">speed: 800</code></div><div class="line number5 index4 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
</code></pre>
<h3 id="easing--string---no-easing-effects-by-default"><code>easing</code> : String - no easing effects by default.</h3>
<p>The default easing of jQuery core, "swing," is used if no easing is specified in the options. You will need an easing plugin if you wish to specify an easing effect other than jQuery's own "swing" or "linear."</p>
<pre><code class="language-javascript"><div id="highlighter_943994" class="syntaxhighlighter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$(</code><code class="string">'div.carousel'</code><code class="plain">).jCarouselLite({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces"> </code><code class="plain">btnNext: </code><code class="string">'.next'</code><code class="plain">,</code></div><div class="line number3 index2 alt2"><code class="undefined spaces"> </code><code class="plain">btnPrev: </code><code class="string">'.prev'</code><code class="plain">,</code></div><div class="line number4 index3 alt1"><code class="undefined spaces"> </code><code class="plain">easing: </code><code class="string">'bounceout'</code></div><div class="line number5 index4 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
</code></pre>
<h3 id="vertical--boolean---default-is-false"><code>vertical</code> : Boolean - default is false</h3>
<p>Determines the direction of the carousel. If set to <code>true</code>, the carousel will display vertically; the next and
prev buttons will slide the items vertically as well. The default is <code>false</code>, which means that the carousel will
display horizontally. The next and prev buttons will slide the items from left to right in this case.</p>
<pre><code class="language-javascript"><div id="highlighter_72655" class="syntaxhighlighter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$(</code><code class="string">'div.carousel'</code><code class="plain">).jCarouselLite({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces"> </code><code class="plain">btnNext: </code><code class="string">'.next'</code><code class="plain">,</code></div><div class="line number3 index2 alt2"><code class="undefined spaces"> </code><code class="plain">btnPrev: </code><code class="string">'.prev'</code><code class="plain">,</code></div><div class="line number4 index3 alt1"><code class="undefined spaces"> </code><code class="plain">vertical: </code><code class="keyword">true</code></div><div class="line number5 index4 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
</code></pre>
<h3 id="circular--boolean---default-is-true"><code>circular</code> : Boolean - default is true</h3>
<p>Setting it to <code>true</code> enables circular navigation. This means, if you click "next" after you reach the last
element, you will automatically slide to the first element and vice versa. If you set circular to false, then
if you click on the "next" button after you reach the last element, you will stay in the last element itself
and similarly for "previous" button and first element.</p>
<pre><code class="language-javascript"><div id="highlighter_177085" class="syntaxhighlighter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$(</code><code class="string">'div.carousel'</code><code class="plain">).jCarouselLite({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces"> </code><code class="plain">btnNext: </code><code class="string">'.next'</code><code class="plain">,</code></div><div class="line number3 index2 alt2"><code class="undefined spaces"> </code><code class="plain">btnPrev: </code><code class="string">'.prev'</code><code class="plain">,</code></div><div class="line number4 index3 alt1"><code class="undefined spaces"> </code><code class="plain">circular: </code><code class="keyword">false</code></div><div class="line number5 index4 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
</code></pre>
<h3 id="visible--number---default-is-3"><code>visible</code> : Number - default is 3</h3>
<p>This specifies the number of items visible at all times within the carousel. The default is 3.
You may set this option to a fractional number (such as <code>3.5</code>), as well.</p>
<pre><code class="language-javascript"><div id="highlighter_633286" class="syntaxhighlighter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$(</code><code class="string">'div.carousel'</code><code class="plain">).jCarouselLite({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces"> </code><code class="plain">btnNext: </code><code class="string">'.next'</code><code class="plain">,</code></div><div class="line number3 index2 alt2"><code class="undefined spaces"> </code><code class="plain">btnPrev: </code><code class="string">'.prev'</code><code class="plain">,</code></div><div class="line number4 index3 alt1"><code class="undefined spaces"> </code><code class="plain">visible: 4</code></div><div class="line number5 index4 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
</code></pre>
<h3 id="start--number---default-is-0"><code>start</code> : Number - default is 0</h3>
<p>You can specify from which item the carousel should start. Remember, the first item in the carousel
has a start of 0, and so on.</p>
<pre><code class="language-javascript"><div id="highlighter_775210" class="syntaxhighlighter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div><div class="line number6 index5 alt1">6</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$(</code><code class="string">'div.carousel'</code><code class="plain">).jCarouselLite({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces"> </code><code class="plain">btnNext: </code><code class="string">'.next'</code><code class="plain">,</code></div><div class="line number3 index2 alt2"><code class="undefined spaces"> </code><code class="plain">btnPrev: </code><code class="string">'.prev'</code><code class="plain">,</code></div><div class="line number4 index3 alt1"><code class="undefined spaces"> </code><code class="comments">// start on the *third* item</code></div><div class="line number5 index4 alt2"><code class="undefined spaces"> </code><code class="plain">start: 2</code></div><div class="line number6 index5 alt1"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
</code></pre>
<h3 id="scroll--number---default-is-1"><code>scroll</code> : Number - default is 1</h3>
<p>The number of items that should scroll/slide when you click the next/prev navigation buttons. By
default, only one item is scrolled, but you may set it to any number. For example, setting it to <code>2</code> will scroll
2 items when you click the next or previous buttons.</p>
<pre><code class="language-javascript"><div id="highlighter_183858" class="syntaxhighlighter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$(</code><code class="string">'div.carousel'</code><code class="plain">).jCarouselLite({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces"> </code><code class="plain">btnNext: </code><code class="string">'.next'</code><code class="plain">,</code></div><div class="line number3 index2 alt2"><code class="undefined spaces"> </code><code class="plain">btnPrev: </code><code class="string">'.prev'</code><code class="plain">,</code></div><div class="line number4 index3 alt1"><code class="undefined spaces"> </code><code class="plain">scroll: 2</code></div><div class="line number5 index4 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
</code></pre>
<h3 id="mousewheel--boolean---default-is-false"><code>mouseWheel</code> : Boolean - default is false</h3>
<p>The carousel can also be navigated using the mouse wheel interface of a scroll mouse instead of (or in addition to) using buttons. To enable this feature, you have to do 2 things:</p>
<ul>
<li>include the mouse-wheel plugin from Brandon Aaron (<a href="http://github.com/brandonaaron/">http://github.com/brandonaaron/</a>).</li>
<li>set the option "mouseWheel" to true.</li>
</ul>
<pre><code class="language-javascript"><div id="highlighter_648477" class="syntaxhighlighter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$(</code><code class="string">'div.carousel'</code><code class="plain">).jCarouselLite({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces"> </code><code class="plain">mouseWheel: </code><code class="keyword">true</code></div><div class="line number3 index2 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
</code></pre>
<p>To use the previous/next buttons as well as the scroll wheel, just supply the options required for both:</p>
<pre><code class="language-javascript"><div id="highlighter_589195" class="syntaxhighlighter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$(</code><code class="string">'div.carousel'</code><code class="plain">).jCarouselLite({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces"> </code><code class="plain">btnNext: </code><code class="string">'.next'</code><code class="plain">,</code></div><div class="line number3 index2 alt2"><code class="undefined spaces"> </code><code class="plain">btnPrev: </code><code class="string">'.prev'</code><code class="plain">,</code></div><div class="line number4 index3 alt1"><code class="undefined spaces"> </code><code class="plain">mouseWheel: </code><code class="keyword">true</code></div><div class="line number5 index4 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
</code></pre>
<h2 id="callback-options">Callback Options<a id="callbacks"></a></h2>
<h3 id="init--function---callback"><code>init</code> : Function - callback</h3>
<p>The init callback function allows you to do some logic for each carousel div before any of the carousel behavior and styles are applied to it.
The function will be passed two arguments:</p>
<ol>
<li>Object representing the result of merging the default settings with the options object passed in when calling .jCarousellite()</li>
<li>jQuery Object containing the top-level <code><li></code> elements in the carousel (useful for checking their length against number of items to be visible at once)</li>
</ol>
<p>If the function returns <code>false</code>, the plugin will skip all the carousel magic for that carousel <code><div></code>.</p>
<pre><code class="language-javascript"><div id="highlighter_499715" class="syntaxhighlighter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div><div class="line number6 index5 alt1">6</div><div class="line number7 index6 alt2">7</div><div class="line number8 index7 alt1">8</div><div class="line number9 index8 alt2">9</div><div class="line number10 index9 alt1">10</div><div class="line number11 index10 alt2">11</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$(</code><code class="string">'div.carousel'</code><code class="plain">).jCarouselLite({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces"> </code><code class="plain">btnNext: </code><code class="string">'.next'</code><code class="plain">,</code></div><div class="line number3 index2 alt2"><code class="undefined spaces"> </code><code class="plain">btnPrev: </code><code class="string">'.prev'</code><code class="plain">,</code></div><div class="line number4 index3 alt1"><code class="undefined spaces"> </code><code class="plain">init: </code><code class="keyword">function</code><code class="plain">(opts, $lis) {</code></div><div class="line number5 index4 alt2"><code class="undefined spaces"> </code><code class="keyword">if</code> <code class="plain">($lis.length > opts.visible) {</code></div><div class="line number6 index5 alt1"><code class="undefined spaces"> </code><code class="plain">$(</code><code class="string">'div.carousel'</code><code class="plain">).append(</code><code class="string">'<a class="prevnext prev">previous</a> <a class="prevnext next">next</a>'</code><code class="plain">);</code></div><div class="line number7 index6 alt2"><code class="undefined spaces"> </code><code class="plain">} </code><code class="keyword">else</code> <code class="plain">{</code></div><div class="line number8 index7 alt1"><code class="undefined spaces"> </code><code class="keyword">return</code> <code class="keyword">false</code><code class="plain">;</code></div><div class="line number9 index8 alt2"><code class="undefined spaces"> </code><code class="plain">}</code></div><div class="line number10 index9 alt1"><code class="undefined spaces"> </code><code class="plain">}</code></div><div class="line number11 index10 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
</code></pre>
<h3 id="first-last--function---callbacks"><code>first</code>, <code>last</code> : Function - callbacks</h3>
<p>When the <code>circular</code> option is set to false you have the option of doing something once the first or last slide has been reached via callbacks.</p>
<pre><code class="language-javascript"><div id="highlighter_778099" class="syntaxhighlighter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div><div class="line number6 index5 alt1">6</div><div class="line number7 index6 alt2">7</div><div class="line number8 index7 alt1">8</div><div class="line number9 index8 alt2">9</div><div class="line number10 index9 alt1">10</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$(</code><code class="string">'div.carousel'</code><code class="plain">).jCarouselLite({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces"> </code><code class="plain">btnNext: </code><code class="string">'.next'</code><code class="plain">,</code></div><div class="line number3 index2 alt2"><code class="undefined spaces"> </code><code class="plain">btnPrev: </code><code class="string">'.prev'</code><code class="plain">,</code></div><div class="line number4 index3 alt1"><code class="undefined spaces"> </code><code class="plain">first: </code><code class="keyword">function</code><code class="plain">() {</code></div><div class="line number5 index4 alt2"><code class="undefined spaces"> </code><code class="plain">alert(</code><code class="string">'This is the first slide'</code><code class="plain">);</code></div><div class="line number6 index5 alt1"><code class="undefined spaces"> </code><code class="plain">},</code></div><div class="line number7 index6 alt2"><code class="undefined spaces"> </code><code class="plain">last: </code><code class="keyword">function</code><code class="plain">() {</code></div><div class="line number8 index7 alt1"><code class="undefined spaces"> </code><code class="plain">alert(</code><code class="string">'This is the last slide'</code><code class="plain">);</code></div><div class="line number9 index8 alt2"><code class="undefined spaces"> </code><code class="plain">}</code></div><div class="line number10 index9 alt1"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
</code></pre>
<h3 id="beforestart-afterend--function---callbacks"><code>beforeStart</code>, <code>afterEnd</code> : Function - callbacks</h3>
<p>If you want to do some logic before the slide starts and after the slide ends,
you can register these 2 callbacks. Inside the functions, <code>this</code> is the
div on which the .jCarouselLite() method is called.
The functions will be passed three arguments:</p>
<ol>
<li>Array of elements that are visible at the time of callback.</li>
<li>Boolean indicating whether the direction is forward (<code>true</code>) or backward (<code>false</code>);</li>
<li>Object containing information that differs depending on what triggered the advance. If triggered by clicking one of the <code>btnGo</code> elements, for example, the object has two properties: <code>btnGo</code>, which references the clicked DOM element, and <code>btnGoIndex</code>, presenting the index of the clicked DOM element in relation to the other "btnGo" buttons.</li>
</ol>
<pre><code class="language-javascript"><div id="highlighter_523750" class="syntaxhighlighter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div><div class="line number6 index5 alt1">6</div><div class="line number7 index6 alt2">7</div><div class="line number8 index7 alt1">8</div><div class="line number9 index8 alt2">9</div><div class="line number10 index9 alt1">10</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$(</code><code class="string">'div.carousel'</code><code class="plain">).jCarouselLite({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces"> </code><code class="plain">btnNext: </code><code class="string">'.next'</code><code class="plain">,</code></div><div class="line number3 index2 alt2"><code class="undefined spaces"> </code><code class="plain">btnPrev: </code><code class="string">'.prev'</code><code class="plain">,</code></div><div class="line number4 index3 alt1"><code class="undefined spaces"> </code><code class="plain">beforeStart: </code><code class="keyword">function</code><code class="plain">(a, direction) {</code></div><div class="line number5 index4 alt2"><code class="undefined spaces"> </code><code class="plain">alert(</code><code class="string">'Before animation starts:'</code> <code class="plain">+ a);</code></div><div class="line number6 index5 alt1"><code class="undefined spaces"> </code><code class="plain">},</code></div><div class="line number7 index6 alt2"><code class="undefined spaces"> </code><code class="plain">afterEnd: </code><code class="keyword">function</code><code class="plain">(a, direction) {</code></div><div class="line number8 index7 alt1"><code class="undefined spaces"> </code><code class="plain">alert(</code><code class="string">'After animation ends:'</code> <code class="plain">+ a);</code></div><div class="line number9 index8 alt2"><code class="undefined spaces"> </code><code class="plain">}</code></div><div class="line number10 index9 alt1"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
</code></pre>
<h2 id="events-">Events <a id="events"></a></h2>
<p>The plugin binds a few custom event handlers to the wrapping <code>div</code> element. They can be triggered at any time by using jQuery's event triggering mechanism. If other custom events are bound to the same elements, you may wish to trigger these using the <code>.jc</code> namespace. For example, instead of <code>.trigger("pauseCarousel")</code>, you could write <code>.trigger("pauseCarousel.jc")</code>.</p>
<h3 id="pausecarousel"><code>pauseCarousel</code></h3>
<p>Pauses an autoscrolling carousel until <code>resumeCarousel</code> is triggered. Note: if the <code>pause</code> option is set to <code>true</code>, then the <code>resumeCarousel</code> event is automatically triggered when the mouse leaves the carousel div.</p>
<pre><code class="language-javascript"><div id="highlighter_323370" class="syntaxhighlighter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$(</code><code class="string">'div.carousel'</code><code class="plain">).trigger(</code><code class="string">'pauseCarousel'</code><code class="plain">)</code></div></div></td></tr></tbody></table></div>
</code></pre>
<h3 id="resumecarousel"><code>resumeCarousel</code></h3>
<p>Resumes an autoscrolling carousel after having been paused.</p>
<pre><code class="language-javascript"><div id="highlighter_581870" class="syntaxhighlighter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$(</code><code class="string">'div.carousel'</code><code class="plain">).trigger(</code><code class="string">'resumeCarousel'</code><code class="plain">)</code></div></div></td></tr></tbody></table></div>
</code></pre>
<h3 id="stopcarousel"><code>stopCarousel</code></h3>
<p>Stops an autoscrolling carousel in a similar fashion to <code>pauseCarousel</code>, with the exception that <code>resumeCarousel</code> will NOT resume the carousel, and neither will the mouse leaving the carousel div. To resume automatic movement on the carousel, use <code>startCarousel</code>.</p>
<pre><code class="language-javascript"><div id="highlighter_919246" class="syntaxhighlighter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$(</code><code class="string">'div.carousel'</code><code class="plain">).trigger(</code><code class="string">'stopCarousel'</code><code class="plain">)</code></div></div></td></tr></tbody></table></div>
</code></pre>
<h3 id="endcarousel"><code>endCarousel</code></h3>
<p>Stops the carousel from functioning and removes all events and data bound by the plugin.</p>
<h3 id="refreshcarousel"><code>refreshCarousel</code></h3>
<p>Updates the dimensions of the carousel and, optionally (as of 1.9.1), the plugin's record of items being used in the carousel. When the <code>responsive</code> option is set to <code>true</code>, the <code>refreshCarousel</code> event is triggered automatically when the window stop resizing (it is "debounced" so it doesn't occur repeatedly during resize).</p>
<pre><code class="language-javascript"><div id="highlighter_581647" class="syntaxhighlighter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// Insert a slide into the carousel.</code></div><div class="line number2 index1 alt1"><code class="comments">// Then...</code></div><div class="line number3 index2 alt2"><code class="plain">$(</code><code class="string">'div.carousel'</code><code class="plain">).trigger(</code><code class="string">'refreshCarousel'</code><code class="plain">, </code><code class="string">'[all]'</code><code class="plain">)</code></div></div></td></tr></tbody></table></div>
</code></pre>
<p>To get a better sense of dynamically adding slides to a carousel, see this <a href="http://plugins.learningjquery.com/jcarousellite/demo/refresh.html">example of <code>refreshCarousel</code></a></p>
<pre><code class="language-javascript"><div id="highlighter_322883" class="syntaxhighlighter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$(</code><code class="string">'div.carousel'</code><code class="plain">).trigger(</code><code class="string">'endCarousel'</code><code class="plain">)</code></div></div></td></tr></tbody></table></div>
</code></pre>
<h3 id="go"><code>go</code></h3>
<p>When triggering the <code>go</code> custom event, you can pass in an integer representing the item in the carousel to go to.</p>
<pre><code class="language-javascript"><div id="highlighter_707386" class="syntaxhighlighter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$(</code><code class="string">'div.carousel'</code><code class="plain">).trigger(</code><code class="string">'go'</code><code class="plain">, 3)</code></div></div></td></tr></tbody></table></div>
</code></pre>
<p>You may also pass in a string ("+=n" or "-=n") to specify an item relative to the currently active item.</p>
<pre><code class="language-javascript"><div id="highlighter_110796" class="syntaxhighlighter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$(</code><code class="string">'div.carousel'</code><code class="plain">).trigger(</code><code class="string">'go'</code><code class="plain">, </code><code class="string">'+=2'</code><code class="plain">)</code></div></div></td></tr></tbody></table></div>
</code></pre>
<p>The default is "+=1" (i.e. the next item).</p>
<pre><code class="language-javascript"><div id="highlighter_831871" class="syntaxhighlighter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$(</code><code class="string">'div.carousel'</code><code class="plain">).trigger(</code><code class="string">'go'</code><code class="plain">)</code></div></div></td></tr></tbody></table></div>
</code></pre>
<h2 id="responsive-carousels">Responsive Carousels<a id="responsive-carousels"></a></h2>
<p>The <code>responsive</code> option is set to <code>false</code> by default. Once you set it to <code>true</code>,
you may want to set a few other options to get the desired effect:</p>
<h3 id="everything-automatic-autocss-is-true-by-default-so-no-need-to-add-it">Everything automatic (<code>autoCSS</code> is <code>true</code> by default, so no need to add it)</h3>
<pre><code class="language-javascript"><div id="highlighter_851365" class="syntaxhighlighter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$(</code><code class="string">'div.carousel'</code><code class="plain">).jCarouselLite({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces"> </code><code class="comments">// autoCSS: true,</code></div><div class="line number3 index2 alt2"><code class="undefined spaces"> </code><code class="plain">autoWidth: </code><code class="keyword">true</code><code class="plain">,</code></div><div class="line number4 index3 alt1"><code class="undefined spaces"> </code><code class="plain">responsive: </code><code class="keyword">true</code></div><div class="line number5 index4 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
</code></pre>
<h3 id="everything-manual-autowidth-is-false-by-default-so-no-need-to-add-it">Everything manual (<code>autoWidth</code> is <code>false</code> by default, so no need to add it)</h3>
<p>Your best bet in this situation is to use CSS media queries.</p>
<pre><code class="language-javascript"><div id="highlighter_791493" class="syntaxhighlighter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div><div class="line number6 index5 alt1">6</div><div class="line number7 index6 alt2">7</div><div class="line number8 index7 alt1">8</div><div class="line number9 index8 alt2">9</div><div class="line number10 index9 alt1">10</div><div class="line number11 index10 alt2">11</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$(</code><code class="string">'div.carousel'</code><code class="plain">).jCarouselLite({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces"> </code><code class="plain">autoCSS: </code><code class="keyword">false</code><code class="plain">,</code></div><div class="line number3 index2 alt2"><code class="undefined spaces"> </code><code class="comments">// autoWidth: false,</code></div><div class="line number4 index3 alt1"><code class="undefined spaces"> </code><code class="plain">responsive: </code><code class="keyword">true</code></div><div class="line number5 index4 alt2"><code class="plain">});</code></div><div class="line number6 index5 alt1"> </div><div class="line number7 index6 alt2"><code class="comments">// Bind your own handler to the `refreshCarousel` custom event,</code></div><div class="line number8 index7 alt1"><code class="comments">// which is triggered when the window stops resizing</code></div><div class="line number9 index8 alt2"><code class="plain">$(</code><code class="string">'div.carousel'</code><code class="plain">).on(</code><code class="string">'refreshCarousel'</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">() {</code></div><div class="line number10 index9 alt1"><code class="undefined spaces"> </code><code class="comments">// do something</code></div><div class="line number11 index10 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
</code></pre>
</body>
</html>