Slideshow.js

Creates slide show from the HTML UL list,
rendering list items as slides

Github: mark-rolich.github.com/Slideshow.js

License: The MIT License (MIT)

Copyright © 2013 Mark Rolich
Slideshow.js requires Event.js package,
which can be acquired at
Github.com and JSClasses.org
Keyboard controls
- next Ctrl + →
- previous Ctrl + ←
- play / pause Ctrl + ␣
How to use

Include CSS stylesheet

<head>
...
<link rel="stylesheet" type="text/css" href="slideshow.css">
...
</head>

Create HTML markup for slideshow

<ul id="my-slide-show" class="slide-show">
    <li><div class="slide1">Slide 1</div></li>
    <li><p class="slide2">Slide 2</p></li>
    <li><span class="slide3">Slide 3</span></li>
    ...
    ...
</ul>

You can use any element inside LI tags

Include libraries and initialize slide show

<script type="text/javascript" src="Event.js"></script>
<script type="text/javascript" src="Slideshow.js"></script>
<script type="text/javascript">
new Slideshow(new Event(), 'my-slide-show');
</script>
</body>
</html>

Options

Set sliding speed (50px per 10ms default)

new Slideshow(new Event(), 'my-slide-show', {
    'speed': 70
});

Slide will move by 70px per 10ms

new Slideshow(new Event(), 'my-slide-show', {
    'speed': 1
});

1px per 10ms - minimum speed

new Slideshow(new Event(), 'my-slide-show', {
    'speed': 900
});

900px per 10ms - maximum speed (current slide size)

Set play speed (1s default)

new Slideshow(new Event(), 'my-slide-show', {
    'playSpeed': 2
});

Slides change in 2s

Autoplay

new Slideshow(new Event(), 'my-slide-show', {
    'autoplay': 1
});

Slide show starts immediately

Play button off

new Slideshow(new Event(), 'my-slide-show', {
    'playButton': 0
});

Keyboard play / pause control will be disabled too

Info panel off
```
new Slideshow(new Event(), 'my-slide-show', {
    'info': 0
});
```
Info panel showing slide count and current slide number will be hidden

Disable all controls

new Slideshow(new Event(), 'my-slide-show', {
    'noControls': 1
});

All keyboard controls will be disabled as well

First-to-Last slide show mode
```
new Slideshow(new Event(), 'my-slide-show', {
    'mode': 'ftl'
});
```
First slide has no 'previous' button,
last slide has no 'next' and play/pause button
Display slide show in open-ended mode (by default)
```
new Slideshow (new Event(), 'my-slide-show', {
    'mode': 'open-end'
});
```
Slideshow allows to proceed from the first and last slide back or next.
Found an issue ? Post it here
Thanks !

Slideshow.js

How to use

Options