Minimal Dynamic Slideshow Plugin - jQuery slide.js

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.