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
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>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 !