-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
457 lines (370 loc) · 77.9 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
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
<!DOCTYPE html>
<html>
<head>
<title>Lumens</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<meta http-equiv="Cache-control" max-age="86400" content="public">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="content-language" content="gb-en">
<meta name="robots" content="index,follow">
<!-- GENERAL META -->
<meta name="author" content="Lukas Meier">
<meta name="keywords" content="Lumens,Slideshow,Vanilla JavaScript,Javascript,Vanilla,Slider,Tiny,no Jquery,Juggern4ut,Github,Lukas,Meier,Lukas Meier,Demo,Examples,Installation,How to">
<meta name="description" content="Lumens - A Tiny JavaScript Slideshow">
<!-- FACEBOOK META -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://juggern4ut.github.io/lumens/">
<meta property="og:description" content="Lumens - A Tiny JavaScript Slideshow">
<meta property="og:title" content="Lumens Slideshow">
<meta property="og:site_name" content="Lumens Slideshow">
<!-- TWITTER META -->
<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="https://juggern4ut.github.io/lumens/">
<meta name="twitter:title" content="Lumens Slideshow">
<meta name="twitter:description" content="Lumens - A Tiny JavaScript Slideshow">
<script src="dist/main.js?v=1"></script>
<link rel="shortcut icon" type="image/ico" href="fav_icon.ico" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--NAVIGATION-->
<nav class="navigation">
<a href="#installation" class="navigation__link">Installation</a>
<a href="#setup" class="navigation__link">Usage</a>
<a href="#compability" class="navigation__link">Compability</a>
<a href="#options" class="navigation__link">Options</a>
<a href="#demo" class="navigation__link">Demo</a>
</nav>
<!-- HEADER -->
<section class="section-header">
<div class="section-header__logo-container">
<img class="section-header__logo" src="front/bulb.svg" />
<h1 class="section-header__title">Lumens</h1>
</div>
<span class="section-header__subtitle">Tiny vanilla JavaScript carousel</span>
<hr />
<p class="section-header__intro">Lumens is a lightweight JavaScript slideshow which works without any dependencies like JQuery or other bloated libraries. It doesn't rely on a own CSS so you have nothing messing with your personal styling.</p>
<p class="section-header__intro">Lumens was built for developers. It doesn't add any navigation or pagination but gives you all the tools to add them yourself. This way you have full control over what happens, and when it does so.</p>
<a href="#installation" class="section-header__arrow"></a>
</section>
<!-- INSTALLATION -->
<section class="section-installation navigation-scroll" id="installation">
<h2 class="heading-secondary heading-secondary--no-margin-top">Installation</h2>
<hr />
<h3 class="heading-tertiary">Download and include</h3>
<p>Installing Lumens is as easy as it gets. Just download the compiled javascript <a href="https://github.com/Juggern4ut/lumens/blob/master/dist/lumens.js">here</a></p>
<p>Now import the script in the head of your HTML like usual.</p>
<pre class="language-html"><code class="language-html"><script src="path/to/lumens.js"></script></pre></code>
<h3 class="heading-tertiary">CDN</h3>
<p>If you prefer to use a CDN you can use the following link. Make sure to add the version if you don't want to update automatically. (Strongly recommended)</p>
<code class="inline-code">https://cdn.jsdelivr.net/gh/juggern4ut/lumens/dist/lumens.js</code>
</section>
<!-- SETUP -->
<section class="section-setup navigation-scroll" id="setup">
<h2 class="heading-secondary">Usage</h2>
<hr />
<h3 class="heading-tertiary">HTML</h3>
<p>After installing Lumens, all you have to do for the markup, is create a html-element and add a child for each slide you'll need in your Slider.</p>
<pre class="language-html"><code class="language-html"><div id="myLumens">
<div>Slide 1</div>
<div>Slide 2</div>
<div>Slide 3</div>
<div>Slide 4</div>
</div></code></pre>
<h3 class="heading-tertiary">JavaScript</h3>
<p>Now just create a new Lumens Object and you're all set.</p>
<code class="inline-code">new Lumens({String, Node} selector, [{Object} options], [{Boolean} showWarnings])</code>
<p>The constructor takes 3 arguments, of which the second and third one are optional. Here they are listed and documented:</p>
<hr class="hr--small hr--left" />
<code class="inline-code">selector {String, Node}</code>
<p>A String to select the element which should be turned into a Lumens-Slider. This can also be a single node. (Nodelists are not allowed yet and will not intialize the slider)</p>
<hr class="hr--small hr--left" />
<code class="inline-code">options {Object}</code>
<p>Optional object containing all the options the slider should handle. If you don't pass this argument, all the default-settings will be used.</p>
<hr class="hr--small hr--left" />
<code class="inline-code">showWarnings {Boolean}</code>
<p>If this argument is set to true, the slider will throw warnings in the console to help you understand why things might not work as expected.</p>
<h3 class="heading-tertiary heading-tertiary--margin">Example</h3>
<pre class="language-js"><code class="language-js">new Lumens("#myLumens", {
//OPTIONS
slidesPerPage: 2,
autoplay: 1000
}, true)</code></pre>
</section>
<!--COMPABILITY-->
<section class="section-compability navigation-scroll" id="compability">
<h2 class="heading-secondary">Compability</h2>
<hr />
<p>Since there are a brazillion possible combinations on devices, operating systems, browsers and versions, Lumens tries to be as compatible as possible with all of them.
It uses very basic vanilla JavaScript that even Internet Explorer 9 can handle. (Amazing, I know).</p>
<p>Lumens supports the most commen Browsers which include:</p>
<ul>
<li>Google Chrome</li>
<li>Mozilla Firefox</li>
<li>Opera</li>
<li>Apple Safari</li>
<li>Microsoft Edge</li>
<li>Microsoft Internet Explorer (version 9 and above)</li>
<li>Samsung Internet</li>
</ul>
<p>For a detailed list, you can check out <a href="https://docs.google.com/spreadsheets/d/1eUDNPch8Y_K6fcRfYqEpRuqZ_FaKXpu3oJ_yJf77-lw/edit?usp=sharing" target="_blank">this Sheet</a> containing all the tests Lumens went through</p>
</section>
<!--OPTIONS-->
<section class="section-options navigation-scroll" id="options">
<h2 class="heading-secondary">Options</h2>
<hr />
<p>Like every slideshow ever in the existence of the internet, Lumens also comes with a bunch of options you can set (if you feel like it).</p>
<code class="inline-code inline-code--narrow">slidesPerPage (number = 1)</code>
<p>Defines how much slides are shown per page. If this is not a whole number, it will be rounded. Enable warnings to get notified about this happening.</p>
<code class="inline-code inline-code--narrow">margin (number = 0)</code>
<p>Defines how much margin each slide should have on the left and right.</p>
<code class="inline-code inline-code--narrow">duration (number = 200)</code>
<p>Defines how fast the animation to switch slides will take in milliseconds.</p>
<code class="inline-code inline-code--narrow">easing (String = "ease-out")</code>
<p>The easing function used for transitions.</p>
<code class="inline-code inline-code--narrow">autoplay ({Boolean, Number} = false)</code>
<p>If set to a number will start an interval in set milliseconds until the slider goes to the next slide.</p>
<code class="inline-code inline-code--narrow">draggable (Boolean = true)</code>
<p>If this is set to false, the slide will no longer be draggable by mouse or touch</p>
<code class="inline-code inline-code--narrow">threshold (Number = 20)</code>
<p>Minimum dragging-distance in pixels to change slide</p>
<code class="inline-code inline-code--narrow">arrowControls (Boolean = false)</code>
<p>If set to true, the user can change slides using the arrow-keys on the keyboard. Does not affect touch devices.</p>
<code class="inline-code inline-code--narrow">mouseButton ({Boolean, Number} = false)</code>
<p>If set to 0, 1 or 2 the user can only drag the slider using this mouse-button. 0 = Left, 1 = Middle, 2 = Right. Does not affet touch devices.</p>
<code class="inline-code inline-code--narrow">preventClickDistance (Number = 20)</code>
<p>If the user drags more pixels than set here, the click-event on the slide will be prevented. Strongly recommended to keep the same as the threshold.</p>
<code class="inline-code inline-code--narrow">responsive (Array = [])</code>
<p>Can be used to set several Breakpoints with different settings. Check out the demo for further instructions.</p>
<code class="inline-code inline-code--narrow">startAtPage (Number = 0)</code>
<p>The slideshow will initialize on the defined Page. Note that this will not alter the order of pages but rather just start at the given page.</p>
<code class="inline-code inline-code--narrow">infinite (Boolean = false)</code>
<p>If this is set to true, the slideshow will loop and start again from the beginning if you scroll further at the end.</p>
<code class="inline-code inline-code--narrow">keepSlideSize (Boolean = false)</code> <span title="Warning: This option is still in testing/development. Test carefully before using in production" class="warning">BETA</span>
<p>Will keep the CSS-defined width of the slide instead of calculating it based on the sliderwidth and the slidesPerPage-option</p>
<code class="inline-code inline-code--narrow">freeScroll (Boolean = false)</code> <span title="Warning: This option is still in testing/development. Test carefully before using in production" class="warning">BETA</span>
<p>With this set to true, Lumens will no longer snap to the closest slide when the dragging stops. (Exception if the user scrolls over the ends of the slideshow)</p>
</section>
<!--EXAMPLES-->
<section class="demo navigation-scroll" id="demo">
<h2 class="heading-secondary">Demos</h2>
<hr />
<p>Sounds all fine and dandy, but I'm sure you want to look at some examples first, to see if Lumens is the right thing for you. So here you go:</p>
</section>
<!-- Default Slider -->
<section class="container">
<article>
<h2 class="heading-secondary heading-secondary--no-margin-top">Normal slider</h2>
<p>A very basic slider, with no configuration. It doesn't get more simple than that. Just drag the slider to... well, slide.</p>
<div class="defaultslider">
<div><svg width="100%" height="100%" viewBox="0 0 171 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-533.372,-118.687)"><path d="M588.301,273.782C561.278,261.981 542.373,235.012 542.373,203.661C542.373,161.454 576.64,127.186 618.847,127.186C661.055,127.186 695.322,161.454 695.322,203.661C695.322,235.012 676.417,261.981 649.394,273.782L649.394,309.294L588.301,309.294L588.301,273.782Z" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-524.673,-99.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(0.813953,0,0,1,-411.157,-79.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10.97px;" /></g><g transform="matrix(0.5,0,0,0.5,-225.053,58.4556)"><circle cx="621.056" cy="348.771" r="9.845" style="fill:none;stroke:#333;stroke-width:20px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M606.288,243.066L586.913,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M616.133,243.066L635.509,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g></svg></div>
<div><svg width="100%" height="100%" viewBox="0 0 171 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-533.372,-118.687)"><path d="M588.301,273.782C561.278,261.981 542.373,235.012 542.373,203.661C542.373,161.454 576.64,127.186 618.847,127.186C661.055,127.186 695.322,161.454 695.322,203.661C695.322,235.012 676.417,261.981 649.394,273.782L649.394,309.294L588.301,309.294L588.301,273.782Z" style="fill:#ecde5f;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-524.673,-99.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(0.813953,0,0,1,-411.157,-79.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#fff;stroke-width:10.97px;" /></g><g transform="matrix(0.5,0,0,0.5,-225.053,58.4556)"><circle cx="621.056" cy="348.771" r="9.845" style="fill:none;stroke:#fff;stroke-width:20px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M606.288,243.066L586.913,204.188" style="fill:none;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M616.133,243.066L635.509,204.188" style="fill:none;stroke:#fff;stroke-width:10px;" /></g></svg></div>
<div><svg width="100%" height="100%" viewBox="0 0 171 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-533.372,-118.687)"><path d="M588.301,273.782C561.278,261.981 542.373,235.012 542.373,203.661C542.373,161.454 576.64,127.186 618.847,127.186C661.055,127.186 695.322,161.454 695.322,203.661C695.322,235.012 676.417,261.981 649.394,273.782L649.394,309.294L588.301,309.294L588.301,273.782Z" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-524.673,-99.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(0.813953,0,0,1,-411.157,-79.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10.97px;" /></g><g transform="matrix(0.5,0,0,0.5,-225.053,58.4556)"><circle cx="621.056" cy="348.771" r="9.845" style="fill:none;stroke:#333;stroke-width:20px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M606.288,243.066L586.913,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M616.133,243.066L635.509,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g></svg></div>
<div><svg width="100%" height="100%" viewBox="0 0 171 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-533.372,-118.687)"><path d="M588.301,273.782C561.278,261.981 542.373,235.012 542.373,203.661C542.373,161.454 576.64,127.186 618.847,127.186C661.055,127.186 695.322,161.454 695.322,203.661C695.322,235.012 676.417,261.981 649.394,273.782L649.394,309.294L588.301,309.294L588.301,273.782Z" style="fill:#ecde5f;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-524.673,-99.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(0.813953,0,0,1,-411.157,-79.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#fff;stroke-width:10.97px;" /></g><g transform="matrix(0.5,0,0,0.5,-225.053,58.4556)"><circle cx="621.056" cy="348.771" r="9.845" style="fill:none;stroke:#fff;stroke-width:20px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M606.288,243.066L586.913,204.188" style="fill:none;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M616.133,243.066L635.509,204.188" style="fill:none;stroke:#fff;stroke-width:10px;" /></g></svg></div>
<div><svg width="100%" height="100%" viewBox="0 0 171 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-533.372,-118.687)"><path d="M588.301,273.782C561.278,261.981 542.373,235.012 542.373,203.661C542.373,161.454 576.64,127.186 618.847,127.186C661.055,127.186 695.322,161.454 695.322,203.661C695.322,235.012 676.417,261.981 649.394,273.782L649.394,309.294L588.301,309.294L588.301,273.782Z" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-524.673,-99.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(0.813953,0,0,1,-411.157,-79.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10.97px;" /></g><g transform="matrix(0.5,0,0,0.5,-225.053,58.4556)"><circle cx="621.056" cy="348.771" r="9.845" style="fill:none;stroke:#333;stroke-width:20px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M606.288,243.066L586.913,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M616.133,243.066L635.509,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g></svg></div>
</div>
<pre class="language-js"><code>var defaultslider = new Lumens(".defaultslider")</code></pre>
</article>
</section>
<!-- Infinite loop -->
<section class="container">
<article>
<h2 class="heading-secondary heading-secondary--no-margin-top">Infinite Loop</h2>
<p>Swipe me as long as you want, you'll never reach an end.</p>
<div class="infiniteslider">
<div><svg width="100%" height="100%" viewBox="0 0 171 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-533.372,-118.687)"><path d="M588.301,273.782C561.278,261.981 542.373,235.012 542.373,203.661C542.373,161.454 576.64,127.186 618.847,127.186C661.055,127.186 695.322,161.454 695.322,203.661C695.322,235.012 676.417,261.981 649.394,273.782L649.394,309.294L588.301,309.294L588.301,273.782Z" style="fill:#ecde5f;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-524.673,-99.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(0.813953,0,0,1,-411.157,-79.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#fff;stroke-width:10.97px;" /></g><g transform="matrix(0.5,0,0,0.5,-225.053,58.4556)"><circle cx="621.056" cy="348.771" r="9.845" style="fill:none;stroke:#fff;stroke-width:20px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M606.288,243.066L586.913,204.188" style="fill:none;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M616.133,243.066L635.509,204.188" style="fill:none;stroke:#fff;stroke-width:10px;" /></g></svg></div>
<div><svg width="100%" height="100%" viewBox="0 0 171 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-533.372,-118.687)"><path d="M588.301,273.782C561.278,261.981 542.373,235.012 542.373,203.661C542.373,161.454 576.64,127.186 618.847,127.186C661.055,127.186 695.322,161.454 695.322,203.661C695.322,235.012 676.417,261.981 649.394,273.782L649.394,309.294L588.301,309.294L588.301,273.782Z" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-524.673,-99.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(0.813953,0,0,1,-411.157,-79.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10.97px;" /></g><g transform="matrix(0.5,0,0,0.5,-225.053,58.4556)"><circle cx="621.056" cy="348.771" r="9.845" style="fill:none;stroke:#333;stroke-width:20px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M606.288,243.066L586.913,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M616.133,243.066L635.509,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g></svg></div>
<div><svg width="100%" height="100%" viewBox="0 0 171 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-533.372,-118.687)"><path d="M588.301,273.782C561.278,261.981 542.373,235.012 542.373,203.661C542.373,161.454 576.64,127.186 618.847,127.186C661.055,127.186 695.322,161.454 695.322,203.661C695.322,235.012 676.417,261.981 649.394,273.782L649.394,309.294L588.301,309.294L588.301,273.782Z" style="fill:#ecde5f;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-524.673,-99.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(0.813953,0,0,1,-411.157,-79.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#fff;stroke-width:10.97px;" /></g><g transform="matrix(0.5,0,0,0.5,-225.053,58.4556)"><circle cx="621.056" cy="348.771" r="9.845" style="fill:none;stroke:#fff;stroke-width:20px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M606.288,243.066L586.913,204.188" style="fill:none;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M616.133,243.066L635.509,204.188" style="fill:none;stroke:#fff;stroke-width:10px;" /></g></svg></div>
<div><svg width="100%" height="100%" viewBox="0 0 171 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-533.372,-118.687)"><path d="M588.301,273.782C561.278,261.981 542.373,235.012 542.373,203.661C542.373,161.454 576.64,127.186 618.847,127.186C661.055,127.186 695.322,161.454 695.322,203.661C695.322,235.012 676.417,261.981 649.394,273.782L649.394,309.294L588.301,309.294L588.301,273.782Z" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-524.673,-99.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(0.813953,0,0,1,-411.157,-79.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10.97px;" /></g><g transform="matrix(0.5,0,0,0.5,-225.053,58.4556)"><circle cx="621.056" cy="348.771" r="9.845" style="fill:none;stroke:#333;stroke-width:20px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M606.288,243.066L586.913,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M616.133,243.066L635.509,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g></svg></div>
<div><svg width="100%" height="100%" viewBox="0 0 171 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-533.372,-118.687)"><path d="M588.301,273.782C561.278,261.981 542.373,235.012 542.373,203.661C542.373,161.454 576.64,127.186 618.847,127.186C661.055,127.186 695.322,161.454 695.322,203.661C695.322,235.012 676.417,261.981 649.394,273.782L649.394,309.294L588.301,309.294L588.301,273.782Z" style="fill:#ecde5f;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-524.673,-99.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(0.813953,0,0,1,-411.157,-79.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#fff;stroke-width:10.97px;" /></g><g transform="matrix(0.5,0,0,0.5,-225.053,58.4556)"><circle cx="621.056" cy="348.771" r="9.845" style="fill:none;stroke:#fff;stroke-width:20px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M606.288,243.066L586.913,204.188" style="fill:none;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M616.133,243.066L635.509,204.188" style="fill:none;stroke:#fff;stroke-width:10px;" /></g></svg></div>
<div><svg width="100%" height="100%" viewBox="0 0 171 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-533.372,-118.687)"><path d="M588.301,273.782C561.278,261.981 542.373,235.012 542.373,203.661C542.373,161.454 576.64,127.186 618.847,127.186C661.055,127.186 695.322,161.454 695.322,203.661C695.322,235.012 676.417,261.981 649.394,273.782L649.394,309.294L588.301,309.294L588.301,273.782Z" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-524.673,-99.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(0.813953,0,0,1,-411.157,-79.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10.97px;" /></g><g transform="matrix(0.5,0,0,0.5,-225.053,58.4556)"><circle cx="621.056" cy="348.771" r="9.845" style="fill:none;stroke:#333;stroke-width:20px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M606.288,243.066L586.913,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M616.133,243.066L635.509,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g></svg></div>
</div>
<pre class="language-js"><code class="language-js">var infiniteslider = new Lumens(".infiniteslider", {
infinite: true
})</code></pre>
</article>
</section>
<!-- Autoplay -->
<section class="container">
<article>
<h2 class="heading-secondary heading-secondary--no-margin-top">Autoplay</h2>
<p>Will change slides in a configurable interval. When dragging the interval will be paused. (duh)</p>
<div class="autoplayslider">
<div><svg width="100%" height="100%" viewBox="0 0 171 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-533.372,-118.687)"><path d="M588.301,273.782C561.278,261.981 542.373,235.012 542.373,203.661C542.373,161.454 576.64,127.186 618.847,127.186C661.055,127.186 695.322,161.454 695.322,203.661C695.322,235.012 676.417,261.981 649.394,273.782L649.394,309.294L588.301,309.294L588.301,273.782Z" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-524.673,-99.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(0.813953,0,0,1,-411.157,-79.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10.97px;" /></g><g transform="matrix(0.5,0,0,0.5,-225.053,58.4556)"><circle cx="621.056" cy="348.771" r="9.845" style="fill:none;stroke:#333;stroke-width:20px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M606.288,243.066L586.913,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M616.133,243.066L635.509,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g></svg></div>
<div><svg width="100%" height="100%" viewBox="0 0 171 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-533.372,-118.687)"><path d="M588.301,273.782C561.278,261.981 542.373,235.012 542.373,203.661C542.373,161.454 576.64,127.186 618.847,127.186C661.055,127.186 695.322,161.454 695.322,203.661C695.322,235.012 676.417,261.981 649.394,273.782L649.394,309.294L588.301,309.294L588.301,273.782Z" style="fill:#ecde5f;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-524.673,-99.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(0.813953,0,0,1,-411.157,-79.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#fff;stroke-width:10.97px;" /></g><g transform="matrix(0.5,0,0,0.5,-225.053,58.4556)"><circle cx="621.056" cy="348.771" r="9.845" style="fill:none;stroke:#fff;stroke-width:20px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M606.288,243.066L586.913,204.188" style="fill:none;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M616.133,243.066L635.509,204.188" style="fill:none;stroke:#fff;stroke-width:10px;" /></g></svg></div>
<div><svg width="100%" height="100%" viewBox="0 0 171 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-533.372,-118.687)"><path d="M588.301,273.782C561.278,261.981 542.373,235.012 542.373,203.661C542.373,161.454 576.64,127.186 618.847,127.186C661.055,127.186 695.322,161.454 695.322,203.661C695.322,235.012 676.417,261.981 649.394,273.782L649.394,309.294L588.301,309.294L588.301,273.782Z" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-524.673,-99.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(0.813953,0,0,1,-411.157,-79.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10.97px;" /></g><g transform="matrix(0.5,0,0,0.5,-225.053,58.4556)"><circle cx="621.056" cy="348.771" r="9.845" style="fill:none;stroke:#333;stroke-width:20px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M606.288,243.066L586.913,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M616.133,243.066L635.509,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g></svg></div>
<div><svg width="100%" height="100%" viewBox="0 0 171 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-533.372,-118.687)"><path d="M588.301,273.782C561.278,261.981 542.373,235.012 542.373,203.661C542.373,161.454 576.64,127.186 618.847,127.186C661.055,127.186 695.322,161.454 695.322,203.661C695.322,235.012 676.417,261.981 649.394,273.782L649.394,309.294L588.301,309.294L588.301,273.782Z" style="fill:#ecde5f;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-524.673,-99.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(0.813953,0,0,1,-411.157,-79.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#fff;stroke-width:10.97px;" /></g><g transform="matrix(0.5,0,0,0.5,-225.053,58.4556)"><circle cx="621.056" cy="348.771" r="9.845" style="fill:none;stroke:#fff;stroke-width:20px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M606.288,243.066L586.913,204.188" style="fill:none;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M616.133,243.066L635.509,204.188" style="fill:none;stroke:#fff;stroke-width:10px;" /></g></svg></div>
<div><svg width="100%" height="100%" viewBox="0 0 171 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-533.372,-118.687)"><path d="M588.301,273.782C561.278,261.981 542.373,235.012 542.373,203.661C542.373,161.454 576.64,127.186 618.847,127.186C661.055,127.186 695.322,161.454 695.322,203.661C695.322,235.012 676.417,261.981 649.394,273.782L649.394,309.294L588.301,309.294L588.301,273.782Z" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-524.673,-99.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(0.813953,0,0,1,-411.157,-79.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10.97px;" /></g><g transform="matrix(0.5,0,0,0.5,-225.053,58.4556)"><circle cx="621.056" cy="348.771" r="9.845" style="fill:none;stroke:#333;stroke-width:20px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M606.288,243.066L586.913,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M616.133,243.066L635.509,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g></svg></div>
</div>
<pre class="language-js"><code class="language-js">var autoplay = new Lumens(".autoplay", {
autoplay: 2500
})</code></pre>
</article>
</section>
<!-- Prevent Click -->
<section class="container">
<article>
<h2 class="heading-secondary heading-secondary--no-margin-top">Prevent click</h2>
<p>In this example the slides contain a Link. If you drag them, the click will not be triggered.</p>
<div class="productslider">
<div><a target="_blank" href="https://placekitten.com">I'm a link</a></div>
<div><a target="_blank" href="https://placekitten.com">but actually</a></div>
<div><a target="_blank" href="https://placekitten.com">the proper term</a></div>
<div><a target="_blank" href="https://placekitten.com">is anchor</a></div>
</div>
<pre class="language-js"><code class="language-js">var preventclick = new Lumens(".preventclick", {
preventClickDistance: 50
})</code></pre>
</article>
</section>
<!-- Responsive Click -->
<section class="container">
<article>
<h2 class="heading-secondary heading-secondary--no-margin-top">Responsive</h2>
<p>Using the "responsive"-Options you can define different settings for different screensizes.</p>
<div class="responsiveslider">
<div><svg width="100%" height="100%" viewBox="0 0 171 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-533.372,-118.687)"><path d="M588.301,273.782C561.278,261.981 542.373,235.012 542.373,203.661C542.373,161.454 576.64,127.186 618.847,127.186C661.055,127.186 695.322,161.454 695.322,203.661C695.322,235.012 676.417,261.981 649.394,273.782L649.394,309.294L588.301,309.294L588.301,273.782Z" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-524.673,-99.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(0.813953,0,0,1,-411.157,-79.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10.97px;" /></g><g transform="matrix(0.5,0,0,0.5,-225.053,58.4556)"><circle cx="621.056" cy="348.771" r="9.845" style="fill:none;stroke:#333;stroke-width:20px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M606.288,243.066L586.913,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M616.133,243.066L635.509,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g></svg></div>
<div><svg width="100%" height="100%" viewBox="0 0 171 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-533.372,-118.687)"><path d="M588.301,273.782C561.278,261.981 542.373,235.012 542.373,203.661C542.373,161.454 576.64,127.186 618.847,127.186C661.055,127.186 695.322,161.454 695.322,203.661C695.322,235.012 676.417,261.981 649.394,273.782L649.394,309.294L588.301,309.294L588.301,273.782Z" style="fill:#ecde5f;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-524.673,-99.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(0.813953,0,0,1,-411.157,-79.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#fff;stroke-width:10.97px;" /></g><g transform="matrix(0.5,0,0,0.5,-225.053,58.4556)"><circle cx="621.056" cy="348.771" r="9.845" style="fill:none;stroke:#fff;stroke-width:20px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M606.288,243.066L586.913,204.188" style="fill:none;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M616.133,243.066L635.509,204.188" style="fill:none;stroke:#fff;stroke-width:10px;" /></g></svg></div>
<div><svg width="100%" height="100%" viewBox="0 0 171 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-533.372,-118.687)"><path d="M588.301,273.782C561.278,261.981 542.373,235.012 542.373,203.661C542.373,161.454 576.64,127.186 618.847,127.186C661.055,127.186 695.322,161.454 695.322,203.661C695.322,235.012 676.417,261.981 649.394,273.782L649.394,309.294L588.301,309.294L588.301,273.782Z" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-524.673,-99.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(0.813953,0,0,1,-411.157,-79.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10.97px;" /></g><g transform="matrix(0.5,0,0,0.5,-225.053,58.4556)"><circle cx="621.056" cy="348.771" r="9.845" style="fill:none;stroke:#333;stroke-width:20px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M606.288,243.066L586.913,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M616.133,243.066L635.509,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g></svg></div>
<div><svg width="100%" height="100%" viewBox="0 0 171 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-533.372,-118.687)"><path d="M588.301,273.782C561.278,261.981 542.373,235.012 542.373,203.661C542.373,161.454 576.64,127.186 618.847,127.186C661.055,127.186 695.322,161.454 695.322,203.661C695.322,235.012 676.417,261.981 649.394,273.782L649.394,309.294L588.301,309.294L588.301,273.782Z" style="fill:#ecde5f;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-524.673,-99.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(0.813953,0,0,1,-411.157,-79.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#fff;stroke-width:10.97px;" /></g><g transform="matrix(0.5,0,0,0.5,-225.053,58.4556)"><circle cx="621.056" cy="348.771" r="9.845" style="fill:none;stroke:#fff;stroke-width:20px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M606.288,243.066L586.913,204.188" style="fill:none;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M616.133,243.066L635.509,204.188" style="fill:none;stroke:#fff;stroke-width:10px;" /></g></svg></div>
<div><svg width="100%" height="100%" viewBox="0 0 171 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-533.372,-118.687)"><path d="M588.301,273.782C561.278,261.981 542.373,235.012 542.373,203.661C542.373,161.454 576.64,127.186 618.847,127.186C661.055,127.186 695.322,161.454 695.322,203.661C695.322,235.012 676.417,261.981 649.394,273.782L649.394,309.294L588.301,309.294L588.301,273.782Z" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-524.673,-99.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(0.813953,0,0,1,-411.157,-79.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10.97px;" /></g><g transform="matrix(0.5,0,0,0.5,-225.053,58.4556)"><circle cx="621.056" cy="348.771" r="9.845" style="fill:none;stroke:#333;stroke-width:20px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M606.288,243.066L586.913,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M616.133,243.066L635.509,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g></svg></div>
<div><svg width="100%" height="100%" viewBox="0 0 171 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-533.372,-118.687)"><path d="M588.301,273.782C561.278,261.981 542.373,235.012 542.373,203.661C542.373,161.454 576.64,127.186 618.847,127.186C661.055,127.186 695.322,161.454 695.322,203.661C695.322,235.012 676.417,261.981 649.394,273.782L649.394,309.294L588.301,309.294L588.301,273.782Z" style="fill:#ecde5f;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-524.673,-99.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(0.813953,0,0,1,-411.157,-79.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#fff;stroke-width:10.97px;" /></g><g transform="matrix(0.5,0,0,0.5,-225.053,58.4556)"><circle cx="621.056" cy="348.771" r="9.845" style="fill:none;stroke:#fff;stroke-width:20px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M606.288,243.066L586.913,204.188" style="fill:none;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M616.133,243.066L635.509,204.188" style="fill:none;stroke:#fff;stroke-width:10px;" /></g></svg></div>
</div>
<pre class="language-js"><code class="language-js">var responsiveslider = new Lumens(".responsiveslider", {
slidesPerPage: 2,
margin: 10,
responsive: [
{
breakpoint: 1024,
settings: {
slidesPerPage: 1
}
}
]
})</code></pre>
</article>
</section>
<!-- Callbacks -->
<section class="container">
<article>
<h2 class="heading-secondary heading-secondary--no-margin-top">Callbacks</h2>
<p>Lumens provides you with callback functions for changing slides or changing the breakpoints during resizing.</p><p>Try swiping to trigger a callback.</p>
<div class="callbackslider">
<div><svg width="100%" height="100%" viewBox="0 0 171 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-533.372,-118.687)"><path d="M588.301,273.782C561.278,261.981 542.373,235.012 542.373,203.661C542.373,161.454 576.64,127.186 618.847,127.186C661.055,127.186 695.322,161.454 695.322,203.661C695.322,235.012 676.417,261.981 649.394,273.782L649.394,309.294L588.301,309.294L588.301,273.782Z" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-524.673,-99.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(0.813953,0,0,1,-411.157,-79.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10.97px;" /></g><g transform="matrix(0.5,0,0,0.5,-225.053,58.4556)"><circle cx="621.056" cy="348.771" r="9.845" style="fill:none;stroke:#333;stroke-width:20px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M606.288,243.066L586.913,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M616.133,243.066L635.509,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g></svg></div>
<div><svg width="100%" height="100%" viewBox="0 0 171 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-533.372,-118.687)"><path d="M588.301,273.782C561.278,261.981 542.373,235.012 542.373,203.661C542.373,161.454 576.64,127.186 618.847,127.186C661.055,127.186 695.322,161.454 695.322,203.661C695.322,235.012 676.417,261.981 649.394,273.782L649.394,309.294L588.301,309.294L588.301,273.782Z" style="fill:#ecde5f;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-524.673,-99.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(0.813953,0,0,1,-411.157,-79.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#fff;stroke-width:10.97px;" /></g><g transform="matrix(0.5,0,0,0.5,-225.053,58.4556)"><circle cx="621.056" cy="348.771" r="9.845" style="fill:none;stroke:#fff;stroke-width:20px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M606.288,243.066L586.913,204.188" style="fill:none;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M616.133,243.066L635.509,204.188" style="fill:none;stroke:#fff;stroke-width:10px;" /></g></svg></div>
<div><svg width="100%" height="100%" viewBox="0 0 171 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-533.372,-118.687)"><path d="M588.301,273.782C561.278,261.981 542.373,235.012 542.373,203.661C542.373,161.454 576.64,127.186 618.847,127.186C661.055,127.186 695.322,161.454 695.322,203.661C695.322,235.012 676.417,261.981 649.394,273.782L649.394,309.294L588.301,309.294L588.301,273.782Z" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-524.673,-99.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(0.813953,0,0,1,-411.157,-79.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10.97px;" /></g><g transform="matrix(0.5,0,0,0.5,-225.053,58.4556)"><circle cx="621.056" cy="348.771" r="9.845" style="fill:none;stroke:#333;stroke-width:20px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M606.288,243.066L586.913,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M616.133,243.066L635.509,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g></svg></div>
<div><svg width="100%" height="100%" viewBox="0 0 171 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-533.372,-118.687)"><path d="M588.301,273.782C561.278,261.981 542.373,235.012 542.373,203.661C542.373,161.454 576.64,127.186 618.847,127.186C661.055,127.186 695.322,161.454 695.322,203.661C695.322,235.012 676.417,261.981 649.394,273.782L649.394,309.294L588.301,309.294L588.301,273.782Z" style="fill:#ecde5f;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-524.673,-99.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(0.813953,0,0,1,-411.157,-79.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#fff;stroke-width:10.97px;" /></g><g transform="matrix(0.5,0,0,0.5,-225.053,58.4556)"><circle cx="621.056" cy="348.771" r="9.845" style="fill:none;stroke:#fff;stroke-width:20px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M606.288,243.066L586.913,204.188" style="fill:none;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M616.133,243.066L635.509,204.188" style="fill:none;stroke:#fff;stroke-width:10px;" /></g></svg></div>
<div><svg width="100%" height="100%" viewBox="0 0 171 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-533.372,-118.687)"><path d="M588.301,273.782C561.278,261.981 542.373,235.012 542.373,203.661C542.373,161.454 576.64,127.186 618.847,127.186C661.055,127.186 695.322,161.454 695.322,203.661C695.322,235.012 676.417,261.981 649.394,273.782L649.394,309.294L588.301,309.294L588.301,273.782Z" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-524.673,-99.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(0.813953,0,0,1,-411.157,-79.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10.97px;" /></g><g transform="matrix(0.5,0,0,0.5,-225.053,58.4556)"><circle cx="621.056" cy="348.771" r="9.845" style="fill:none;stroke:#333;stroke-width:20px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M606.288,243.066L586.913,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M616.133,243.066L635.509,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g></svg></div>
</div>
<p id="callback"> </p>
<pre class="language-js"><code class="language-js">var callbackslider = new Lumens(".callbackslider")
callbackslider.beforeChange(() => {
//SLIDE CHANGE BEGAN
})
callbackslider.afterChange(() => {
//SLIDE CHANGED
})
</code></pre>
<br />
<p>There are also a couple of other callbacks which you can use to further customize Lumens. Check out the complete list below:</p>
<code class="inline-code inline-code--narrow">beforeChange</code>
<p>This will be called when a change in the slideshow occured, but the animation is not yet finisehd.</p>
<hr class="hr--left hr--small"/>
<code class="inline-code inline-code--narrow">afterChange</code>
<p>This will be called when a change in the slideshow occured, and the animation has finisehd.</p>
<hr class="hr--left hr--small"/>
<code class="inline-code inline-code--narrow">beforeDragging</code>
<p>This will be called as soon as the user attempts to drag the slideshow. (aka "holds the mouse down")</p>
<hr class="hr--left hr--small"/>
<code class="inline-code inline-code--narrow">dragging</code>
<p>This will be called when the user drags the Slideshow around</p>
<hr class="hr--left hr--small"/>
<code class="inline-code inline-code--narrow">afterDragging</code>
<p>This will be called when the user releases the mouse or finger on the slideshow and stops dragging</p>
<hr class="hr--left hr--small"/>
<code class="inline-code inline-code--narrow">changeBreakpoint</code>
<p>This will be called when the user resizes the screen so that the slideshow reaches a new breakpoint and changes it's settings.</p>
</article>
</section>
<!-- API -->
<section class="container">
<article>
<h2 class="heading-secondary heading-secondary--no-margin-top">Functions</h2>
<p>Use the given functions to control slideshow just as you want it to</p>
<div class="apislider">
<div><svg width="100%" height="100%" viewBox="0 0 171 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-533.372,-118.687)"><path d="M588.301,273.782C561.278,261.981 542.373,235.012 542.373,203.661C542.373,161.454 576.64,127.186 618.847,127.186C661.055,127.186 695.322,161.454 695.322,203.661C695.322,235.012 676.417,261.981 649.394,273.782L649.394,309.294L588.301,309.294L588.301,273.782Z" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-524.673,-99.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(0.813953,0,0,1,-411.157,-79.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10.97px;" /></g><g transform="matrix(0.5,0,0,0.5,-225.053,58.4556)"><circle cx="621.056" cy="348.771" r="9.845" style="fill:none;stroke:#333;stroke-width:20px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M606.288,243.066L586.913,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M616.133,243.066L635.509,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g></svg></div>
<div><svg width="100%" height="100%" viewBox="0 0 171 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-533.372,-118.687)"><path d="M588.301,273.782C561.278,261.981 542.373,235.012 542.373,203.661C542.373,161.454 576.64,127.186 618.847,127.186C661.055,127.186 695.322,161.454 695.322,203.661C695.322,235.012 676.417,261.981 649.394,273.782L649.394,309.294L588.301,309.294L588.301,273.782Z" style="fill:#ecde5f;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-524.673,-99.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(0.813953,0,0,1,-411.157,-79.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#fff;stroke-width:10.97px;" /></g><g transform="matrix(0.5,0,0,0.5,-225.053,58.4556)"><circle cx="621.056" cy="348.771" r="9.845" style="fill:none;stroke:#fff;stroke-width:20px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M606.288,243.066L586.913,204.188" style="fill:none;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M616.133,243.066L635.509,204.188" style="fill:none;stroke:#fff;stroke-width:10px;" /></g></svg></div>
<div><svg width="100%" height="100%" viewBox="0 0 171 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-533.372,-118.687)"><path d="M588.301,273.782C561.278,261.981 542.373,235.012 542.373,203.661C542.373,161.454 576.64,127.186 618.847,127.186C661.055,127.186 695.322,161.454 695.322,203.661C695.322,235.012 676.417,261.981 649.394,273.782L649.394,309.294L588.301,309.294L588.301,273.782Z" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-524.673,-99.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(0.813953,0,0,1,-411.157,-79.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10.97px;" /></g><g transform="matrix(0.5,0,0,0.5,-225.053,58.4556)"><circle cx="621.056" cy="348.771" r="9.845" style="fill:none;stroke:#333;stroke-width:20px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M606.288,243.066L586.913,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M616.133,243.066L635.509,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g></svg></div>
<div><svg width="100%" height="100%" viewBox="0 0 171 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-533.372,-118.687)"><path d="M588.301,273.782C561.278,261.981 542.373,235.012 542.373,203.661C542.373,161.454 576.64,127.186 618.847,127.186C661.055,127.186 695.322,161.454 695.322,203.661C695.322,235.012 676.417,261.981 649.394,273.782L649.394,309.294L588.301,309.294L588.301,273.782Z" style="fill:#ecde5f;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-524.673,-99.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(0.813953,0,0,1,-411.157,-79.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#fff;stroke-width:10.97px;" /></g><g transform="matrix(0.5,0,0,0.5,-225.053,58.4556)"><circle cx="621.056" cy="348.771" r="9.845" style="fill:none;stroke:#fff;stroke-width:20px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M606.288,243.066L586.913,204.188" style="fill:none;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M616.133,243.066L635.509,204.188" style="fill:none;stroke:#fff;stroke-width:10px;" /></g></svg></div>
<div><svg width="100%" height="100%" viewBox="0 0 171 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-533.372,-118.687)"><path d="M588.301,273.782C561.278,261.981 542.373,235.012 542.373,203.661C542.373,161.454 576.64,127.186 618.847,127.186C661.055,127.186 695.322,161.454 695.322,203.661C695.322,235.012 676.417,261.981 649.394,273.782L649.394,309.294L588.301,309.294L588.301,273.782Z" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-524.673,-99.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(0.813953,0,0,1,-411.157,-79.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10.97px;" /></g><g transform="matrix(0.5,0,0,0.5,-225.053,58.4556)"><circle cx="621.056" cy="348.771" r="9.845" style="fill:none;stroke:#333;stroke-width:20px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M606.288,243.066L586.913,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M616.133,243.066L635.509,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g></svg></div>
</div>
<button id="prev">Previous</button>
<button id="next">Next</button>
<pre class="language-js"><code class="language-js">apislider = new Lumens(".apislider", {
draggable: false
})
document.getElementById("next").addEventListener("click", () => {
apislider.gotoNext()
})
document.getElementById("prev").addEventListener("click", () => {
apislider.gotoPrev()
})</code></pre>
</article>
</section>
<!-- Arrow Keys -->
<section class="container">
<article>
<h2 class="heading-secondary heading-secondary--no-margin-top">Arrow-keys</h2>
<p>You can also configure the slideshow to be swipeable using the arrow-keys.</p>
<div class="arrowslider">
<div><svg width="100%" height="100%" viewBox="0 0 171 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-533.372,-118.687)"><path d="M588.301,273.782C561.278,261.981 542.373,235.012 542.373,203.661C542.373,161.454 576.64,127.186 618.847,127.186C661.055,127.186 695.322,161.454 695.322,203.661C695.322,235.012 676.417,261.981 649.394,273.782L649.394,309.294L588.301,309.294L588.301,273.782Z" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-524.673,-99.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(0.813953,0,0,1,-411.157,-79.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10.97px;" /></g><g transform="matrix(0.5,0,0,0.5,-225.053,58.4556)"><circle cx="621.056" cy="348.771" r="9.845" style="fill:none;stroke:#333;stroke-width:20px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M606.288,243.066L586.913,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M616.133,243.066L635.509,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g></svg></div>
<div><svg width="100%" height="100%" viewBox="0 0 171 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-533.372,-118.687)"><path d="M588.301,273.782C561.278,261.981 542.373,235.012 542.373,203.661C542.373,161.454 576.64,127.186 618.847,127.186C661.055,127.186 695.322,161.454 695.322,203.661C695.322,235.012 676.417,261.981 649.394,273.782L649.394,309.294L588.301,309.294L588.301,273.782Z" style="fill:#ecde5f;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-524.673,-99.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(0.813953,0,0,1,-411.157,-79.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#fff;stroke-width:10.97px;" /></g><g transform="matrix(0.5,0,0,0.5,-225.053,58.4556)"><circle cx="621.056" cy="348.771" r="9.845" style="fill:none;stroke:#fff;stroke-width:20px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M606.288,243.066L586.913,204.188" style="fill:none;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M616.133,243.066L635.509,204.188" style="fill:none;stroke:#fff;stroke-width:10px;" /></g></svg></div>
<div><svg width="100%" height="100%" viewBox="0 0 171 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-533.372,-118.687)"><path d="M588.301,273.782C561.278,261.981 542.373,235.012 542.373,203.661C542.373,161.454 576.64,127.186 618.847,127.186C661.055,127.186 695.322,161.454 695.322,203.661C695.322,235.012 676.417,261.981 649.394,273.782L649.394,309.294L588.301,309.294L588.301,273.782Z" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-524.673,-99.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(0.813953,0,0,1,-411.157,-79.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10.97px;" /></g><g transform="matrix(0.5,0,0,0.5,-225.053,58.4556)"><circle cx="621.056" cy="348.771" r="9.845" style="fill:none;stroke:#333;stroke-width:20px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M606.288,243.066L586.913,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M616.133,243.066L635.509,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g></svg></div>
<div><svg width="100%" height="100%" viewBox="0 0 171 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-533.372,-118.687)"><path d="M588.301,273.782C561.278,261.981 542.373,235.012 542.373,203.661C542.373,161.454 576.64,127.186 618.847,127.186C661.055,127.186 695.322,161.454 695.322,203.661C695.322,235.012 676.417,261.981 649.394,273.782L649.394,309.294L588.301,309.294L588.301,273.782Z" style="fill:#ecde5f;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-524.673,-99.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(0.813953,0,0,1,-411.157,-79.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#fff;stroke-width:10.97px;" /></g><g transform="matrix(0.5,0,0,0.5,-225.053,58.4556)"><circle cx="621.056" cy="348.771" r="9.845" style="fill:none;stroke:#fff;stroke-width:20px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M606.288,243.066L586.913,204.188" style="fill:none;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M616.133,243.066L635.509,204.188" style="fill:none;stroke:#fff;stroke-width:10px;" /></g></svg></div>
<div><svg width="100%" height="100%" viewBox="0 0 171 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-533.372,-118.687)"><path d="M588.301,273.782C561.278,261.981 542.373,235.012 542.373,203.661C542.373,161.454 576.64,127.186 618.847,127.186C661.055,127.186 695.322,161.454 695.322,203.661C695.322,235.012 676.417,261.981 649.394,273.782L649.394,309.294L588.301,309.294L588.301,273.782Z" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-524.673,-99.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(0.813953,0,0,1,-411.157,-79.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10.97px;" /></g><g transform="matrix(0.5,0,0,0.5,-225.053,58.4556)"><circle cx="621.056" cy="348.771" r="9.845" style="fill:none;stroke:#333;stroke-width:20px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M606.288,243.066L586.913,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M616.133,243.066L635.509,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g></svg></div>
</div>
<pre class="language-js"><code>var arrowslider = new Lumens(".arrowslider", {
arrowControls: true
})</code></pre>
</article>
</section>
<!-- Keep Slidewidth -->
<section class="container">
<article>
<h2 class="heading-secondary heading-secondary--no-margin-top">Variable slidewidth</h2>
<p>If you don't want to have fixed widths in your slides. Lumens can take care of that aswell</p>
<div class="keepsize">
<div><svg width="100%" height="100%" viewBox="0 0 171 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-533.372,-118.687)"><path d="M588.301,273.782C561.278,261.981 542.373,235.012 542.373,203.661C542.373,161.454 576.64,127.186 618.847,127.186C661.055,127.186 695.322,161.454 695.322,203.661C695.322,235.012 676.417,261.981 649.394,273.782L649.394,309.294L588.301,309.294L588.301,273.782Z" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-524.673,-99.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(0.813953,0,0,1,-411.157,-79.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10.97px;" /></g><g transform="matrix(0.5,0,0,0.5,-225.053,58.4556)"><circle cx="621.056" cy="348.771" r="9.845" style="fill:none;stroke:#333;stroke-width:20px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M606.288,243.066L586.913,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M616.133,243.066L635.509,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g></svg></div>
<div><svg width="100%" height="100%" viewBox="0 0 171 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-533.372,-118.687)"><path d="M588.301,273.782C561.278,261.981 542.373,235.012 542.373,203.661C542.373,161.454 576.64,127.186 618.847,127.186C661.055,127.186 695.322,161.454 695.322,203.661C695.322,235.012 676.417,261.981 649.394,273.782L649.394,309.294L588.301,309.294L588.301,273.782Z" style="fill:#ecde5f;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-524.673,-99.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(0.813953,0,0,1,-411.157,-79.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#fff;stroke-width:10.97px;" /></g><g transform="matrix(0.5,0,0,0.5,-225.053,58.4556)"><circle cx="621.056" cy="348.771" r="9.845" style="fill:none;stroke:#fff;stroke-width:20px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M606.288,243.066L586.913,204.188" style="fill:none;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M616.133,243.066L635.509,204.188" style="fill:none;stroke:#fff;stroke-width:10px;" /></g></svg></div>
<div><svg width="100%" height="100%" viewBox="0 0 171 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-533.372,-118.687)"><path d="M588.301,273.782C561.278,261.981 542.373,235.012 542.373,203.661C542.373,161.454 576.64,127.186 618.847,127.186C661.055,127.186 695.322,161.454 695.322,203.661C695.322,235.012 676.417,261.981 649.394,273.782L649.394,309.294L588.301,309.294L588.301,273.782Z" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-524.673,-99.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(0.813953,0,0,1,-411.157,-79.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10.97px;" /></g><g transform="matrix(0.5,0,0,0.5,-225.053,58.4556)"><circle cx="621.056" cy="348.771" r="9.845" style="fill:none;stroke:#333;stroke-width:20px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M606.288,243.066L586.913,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M616.133,243.066L635.509,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g></svg></div>
<div><svg width="100%" height="100%" viewBox="0 0 171 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-533.372,-118.687)"><path d="M588.301,273.782C561.278,261.981 542.373,235.012 542.373,203.661C542.373,161.454 576.64,127.186 618.847,127.186C661.055,127.186 695.322,161.454 695.322,203.661C695.322,235.012 676.417,261.981 649.394,273.782L649.394,309.294L588.301,309.294L588.301,273.782Z" style="fill:#ecde5f;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-524.673,-99.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(0.813953,0,0,1,-411.157,-79.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#fff;stroke-width:10.97px;" /></g><g transform="matrix(0.5,0,0,0.5,-225.053,58.4556)"><circle cx="621.056" cy="348.771" r="9.845" style="fill:none;stroke:#fff;stroke-width:20px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M606.288,243.066L586.913,204.188" style="fill:none;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M616.133,243.066L635.509,204.188" style="fill:none;stroke:#fff;stroke-width:10px;" /></g></svg></div>
<div><svg width="100%" height="100%" viewBox="0 0 171 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-533.372,-118.687)"><path d="M588.301,273.782C561.278,261.981 542.373,235.012 542.373,203.661C542.373,161.454 576.64,127.186 618.847,127.186C661.055,127.186 695.322,161.454 695.322,203.661C695.322,235.012 676.417,261.981 649.394,273.782L649.394,309.294L588.301,309.294L588.301,273.782Z" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-524.673,-99.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(0.813953,0,0,1,-411.157,-79.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#333;stroke-width:10.97px;" /></g><g transform="matrix(0.5,0,0,0.5,-225.053,58.4556)"><circle cx="621.056" cy="348.771" r="9.845" style="fill:none;stroke:#333;stroke-width:20px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M606.288,243.066L586.913,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M616.133,243.066L635.509,204.188" style="fill:none;stroke:#333;stroke-width:10px;" /></g></svg></div>
<div><svg width="100%" height="100%" viewBox="0 0 171 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-533.372,-118.687)"><path d="M588.301,273.782C561.278,261.981 542.373,235.012 542.373,203.661C542.373,161.454 576.64,127.186 618.847,127.186C661.055,127.186 695.322,161.454 695.322,203.661C695.322,235.012 676.417,261.981 649.394,273.782L649.394,309.294L588.301,309.294L588.301,273.782Z" style="fill:#ecde5f;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-524.673,-99.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(0.813953,0,0,1,-411.157,-79.2488)"><path d="M580.296,307.167L640,307.167" style="fill:none;stroke:#fff;stroke-width:10.97px;" /></g><g transform="matrix(0.5,0,0,0.5,-225.053,58.4556)"><circle cx="621.056" cy="348.771" r="9.845" style="fill:none;stroke:#fff;stroke-width:20px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M606.288,243.066L586.913,204.188" style="fill:none;stroke:#fff;stroke-width:10px;" /></g><g transform="matrix(1,0,0,1,-525.736,-92.6286)"><path d="M616.133,243.066L635.509,204.188" style="fill:none;stroke:#fff;stroke-width:10px;" /></g></svg></div>
</div>
<pre class="language-js"><code>var keepsize = new Lumens(".keepsize", {
keepSlideSize: true
})</code></pre>
</article>
</section>
<!-- Scroll Freely -->
<section class="container">
<article>
<h2 class="heading-secondary heading-secondary--no-margin-top">Free Scroll</h2>
<p>Lumens can also be used as a horizontal srollbar, just use the options <span class="inline-code inline-code--narrow">freeScroll</span> and <span class="inline-code inline-code--narrow">keepSlideSize</span> combined.</p>
<div class="freescroll">
<img src="front/timeline.jpg">
</div>
<pre class="language-js"><code>var freescroll = new Lumens(".freescroll", {
keepSlideSize: true,
freeScroll: true
})</code></pre>
</article>
</section>
<footer>
<a href="https://github.com/Juggern4ut/lumens">Lumens on Github</a>
<a href="https://github.com/Juggern4ut">Author</a>
</footer>
</body>
</html>