Minimal Dynamic Slideshow Plugin - jQuery slide.js
File Size: | 6.37 KB |
---|---|
Views Total: | 775 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

slide.js is a simple, dynamic, cross-browser jQuery slideshow plugin that automatically fades through an array of images on a loop.
The slideshow automatically loads image data from a JavaScript array and switches between these images at a given speed.
How to use it:
1. Embed the first image of the slideshow into the webpage.
<img src="1.jpg" id="my-image">
2. Apply the plugin to the img tag and specify an array of images for the slideshow.
$('#my-image').Slides({ images : ['1.jpg', '2.jpg', ...] });
3. This will create a slideshow that rotates over the images passed in the array. You can also pass some optional settings for a bit of customization. Passing these settings will create a slideshow that first waits 2s before starting the slideshow timer. Each image is then displayed 5s and faded with a transition time of 3s.
$('#my-image').Slides({ // wait before start, default 0 wait : 2000, // pause on each image, default 6000 pause : 5000, // time to fade, default 1000 fade : 3000 });
4. There's also an option to create a simple slideshow in a fully automatic, declarative way. Simply add the data attribute 'data-slides' to an image element, and supply an array string of images.
<img src="1.jpg" data-slides="['2.jpg', '3.jpg', '4.jpg', '5.jpg']">
5. Some configuration properties may also be provided by 'data' attributes.
<img src="1.jpg" data-slides="['2.jpg', '3.jpg', '4.jpg', '5.jpg']" data-wait="0" data-pause="2000" data-fade="1200">
This awesome jQuery plugin is developed by olle. For more Advanced Usages, please check the demo page or visit the official website.