anorgatarrak-wordpress-theme/node_modules/simple-slideshow
2018-02-24 18:44:11 +01:00
..
demo Actualizado todo el sistema de idiomas con el plugin de lenguaje y adaptado el css para pantallas pequeñas 2018-02-24 18:44:11 +01:00
src Actualizado todo el sistema de idiomas con el plugin de lenguaje y adaptado el css para pantallas pequeñas 2018-02-24 18:44:11 +01:00
test Actualizado todo el sistema de idiomas con el plugin de lenguaje y adaptado el css para pantallas pequeñas 2018-02-24 18:44:11 +01:00
.npmignore Actualizado todo el sistema de idiomas con el plugin de lenguaje y adaptado el css para pantallas pequeñas 2018-02-24 18:44:11 +01:00
.travis.yml Actualizado todo el sistema de idiomas con el plugin de lenguaje y adaptado el css para pantallas pequeñas 2018-02-24 18:44:11 +01:00
bower.json Actualizado todo el sistema de idiomas con el plugin de lenguaje y adaptado el css para pantallas pequeñas 2018-02-24 18:44:11 +01:00
gulpfile.js Actualizado todo el sistema de idiomas con el plugin de lenguaje y adaptado el css para pantallas pequeñas 2018-02-24 18:44:11 +01:00
karma.conf.js Actualizado todo el sistema de idiomas con el plugin de lenguaje y adaptado el css para pantallas pequeñas 2018-02-24 18:44:11 +01:00
LICENSE Actualizado todo el sistema de idiomas con el plugin de lenguaje y adaptado el css para pantallas pequeñas 2018-02-24 18:44:11 +01:00
package.json Actualizado todo el sistema de idiomas con el plugin de lenguaje y adaptado el css para pantallas pequeñas 2018-02-24 18:44:11 +01:00
README.md Actualizado todo el sistema de idiomas con el plugin de lenguaje y adaptado el css para pantallas pequeñas 2018-02-24 18:44:11 +01:00

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>