anorgatarrak-frontend/node_modules/simple-slideshow

simple-slideshow

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>