Submit your widget

jquery-simple-slideshow - A simple, low-config, jQuery-based slideshow.

Created 4 years ago   Views 3338   downloads 675    Author matthiasmullie
View DemoDownload
16
Share |

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.

  • 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> 
  • 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 can be passed in as a { key: value } object literal. Available options are:

propertydefault valuedescription
fadeTime5000The duration for which an image will be displayed, in milliseconds
fadeSpeed'normal'The animation time during which the image will fade out, in milliseconds
bindPreviousjQuery element(s) that, when clicked, should display the previous image
bindNextjQuery element(s) that, when clicked, should display the next image
bindSpecificjQuery element(s) that, when clicked, should display a specific image. First element will be bound to first image, second element to second image, ...
imagesArray of paths for image to be displayed. Paths can also be defined via the slideshow element's data-images attribute
linksOptional 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
randomfalseRandomize the images' display order

Install this package via npm:

npm install jquery-simple-slideshow

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

jquery-simple-slideshow is MIT licensed.