Simple slideshow library with no dependencies like jQuery.
JavaScript CSS
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
src
test
.gitignore
.travis.yml
LICENSE
README.md
bower.json
gulpfile.js
karma.conf.js
package.json

README.md

simple-slideshow

Build Status Test Coverage

Simple slideshow library. Does not depend on jQuery. Uses CSS3 transformations for animation. Compatible with Chrome, Firefox, Safari and IE 10+.

See the demo.

Install

Available on npm or bower:

$ npm install simple-slideshow --save
$ bower install omichelsen/simple-slideshow --save

Include the script and stylesheet in your web page:

<link rel="stylesheet" href="bower_components/simple-slideshow/src/slideshow.css">
<script src="bower_components/simple-slideshow/src/slideshow.js"></script>

Usage

Create a list of images, and the title and alt texts will be used as captions. You can also wrap them in a link to make them clickable.

<ul class="slideshow">
    <li><a href="test1.html"><img src="test1.jpg" title="Test 1" alt="Description for image 1"></a></li>
    <li><a href="test2.html"><img src="test2.jpg" title="Test 2" alt="Description for image 2"></a></li>
    <li><a href="test3.html"><img src="test3.jpg" title="Test 3" alt="Description for image 3"></a></li>
</ul>

Initialize the slideshow:

var slsh = new SlideShow('.slideshow', {timeout: 5000});

The optional setting timeout defines how many miliseconds to wait between slides.

You can get a reference to the target element by the property slsh.element.

If used in an single-page app you can release all resources by calling slsh.destroy().

Styling

You should set a default size for the slideshow that matches your images. You can do this in CSS:

<style>
    .slideshow {
        width: 1024px;
        height: 768px;
    }
</style>