Simple slideshow library with no dependencies like jQuery.
JavaScript CSS HTML
Latest commit 0ae4396 Oct 2, 2016 @omichelsen committed on GitHub Merge pull request #15 from omichelsen/greenkeeper-yargs-6.0.0
Update yargs to version 6.0.0 πŸš€
Permalink
Failed to load latest commit information.
demo Updated demo and tests. Jun 13, 2015
src Fix spelling. Jan 28, 2016
test Added tests for destroy(). Jun 13, 2015
.gitignore
.travis.yml
LICENSE
README.md Updated readme. Jun 13, 2015
bower.json
gulpfile.js Initial import. Mar 19, 2015
karma.conf.js Upgrade phantomjs and remove polyfill. Jan 28, 2016
package.json chore(package): update yargs to version 6.0.0 Sep 30, 2016

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>