This time I will share jQuery Plugin and tutorial about Minimal Dynamic Slideshow Plugin – jQuery slide.js, hope it will help you in programming stack.
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.
1 |
<img src="1.jpg" id="my-image"> |
2. Apply the plugin to the img tag and specify an array of images for the slideshow.
1 |
$('#my-image').Slides({ |
2 |
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.
01 |
$('#my-image').Slides({ |
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.
2 |
data-slides="['2.jpg', '3.jpg', '4.jpg', '5.jpg']"> |
5. Some configuration properties may also be provided by ‘data’ attributes.
2 |
data-slides="['2.jpg', '3.jpg', '4.jpg', '5.jpg']" |
This awesome jQuery plugin is developed by olle. For more Advanced Usages, please check the demo page or visit the official website.
