node package manager
Easy sharing. Manage teams and permissions with one click. Create a free org »

jquery-simple-slideshow

jquery-simple-slideshow

This is a simple jQuery-based slideshow. It will not require a pre-defined complex HTML structure. All that is needed is for 1 original to be added to the HTML. 2 Clones will be created at exactly the place of the original image, and will start iterating the images according to the desired config.

Usage

Example 1

  • 10 second display time
  • 1 second fade time
  • previous & next buttons
  • 3 images, all clickable to 3 links
  • random images

Looks like:

<img id="slideshow" src="path/to/initial/file.jpg" />
<a href="#" id="prev">Previous</a>
<a href="#" id="next">Next</a>
 
<script src="jquery.min.js" /> <!-- path to jQuery -->
<script src="jquery.simple.slideshow.js" /> <!-- path to slideshow script -->
<script>
    $('#slideshow').simpleSlideshow({
        fadeTime: 10000,
        fadeSpeed: 1000,
        bindPrevious: $('#prev'), // bind button to previous image 
        bindNext: $('#next'), // bind button to next image 
        images: [
            'path/to/initial/file.jpg',
            'path/to/second/file.jpg',
            'path/to/another/file.jpg',
        ],
        links: [
            'http://www.mullie.eu',
            'http://www.twitter.com/matthiasmullie',
            'http://www.linkedin.com/in/matthiasmullie',
        ],
        random: true
    });
</script> 

Example 2

  • Image-specific controls
  • Image paths tossed in as data-attribute

Looks like:

<img id="slideshow" src="path/to/initial/file.jpg" data-images="path/to/initial/file.jpg,path/to/second/file.jpg,path/to/another/file.jpg" />
<a href="#" class="controls">1</a>
<a href="#" class="controls">2</a>
<a href="#" class="controls">3</a>
 
<script src="jquery.min.js" /> <!-- path to jQuery -->
<script src="jquery.simple.slideshow.js" /> <!-- path to slideshow script -->
<script>
    $('#slideshow').simpleSlideshow({
        bindSpecific: $('.controls'), // bind image-specific buttons 
    });
</script> 

Options

Options can be passed in as a { key: value } object literal. Available options are:

property default value description
fadeTime 5000 The duration for which an image will be displayed, in milliseconds
fadeSpeed 'normal' The animation time during which the image will fade out, in milliseconds
bindPrevious jQuery element(s) that, when clicked, should display the previous image
bindNext jQuery element(s) that, when clicked, should display the next image
bindSpecific jQuery element(s) that, when clicked, should display a specific image. First element will be bound to first image, second element to second image, ...
images Array of paths for image to be displayed. Paths can also be defined via the slideshow element's data-images attribute
links Optional array of links to make images clickable, tied by index to the array of images. Paths can also be defined via the slideshow element's data-links attribute
random false Randomize the images' display order

Installation

Install this package via npm:

npm install jquery-simple-slideshow

Or simply copy jquery.simple.slideshow.js into your project.

License

jquery-simple-slideshow is MIT licensed.