Basic Responsive Image Slideshow Plugin For jQuery

A lightweight and dead simple jQuery plugin for creating a fully responsive image slideshow with following features:

• Auto-slide at a certain interval.
• Custom aspect ratio of your images.
• Custom start slide.
• Fully customizable via CSS.
• Navigation dots.
• Cross browser.

How to use it:

1. Include the slideshow.css in the header of your web page.

<link href="src/slideshow.css" rel="stylesheet" type="text/css">

2. Create an image slideshow from inline elements.

<div class="slideshow">
    <div> <img src="1.jpg" alt="" /> </div>
    <div> <img src="2.jpg" alt="" /> </div>
    <div> <img src="3.jpg" alt="" /> </div>
    ...
</div>

3. Make sure to wrap the image slideshow in a container element with a fixed width.

<style>
.container {
 width: 960px;
 height: auto;
 margin: 0 auto
}
</style>

<div class="container">
  <div class="slideshow">
    <div> <img src="1.jpg" alt="" /> </div>
    <div> <img src="2.jpg" alt="" /> </div>
    <div> <img src="3.jpg" alt="" /> </div>
     ...
  </div>
</div>

4. Call the plugin with default options to create a basic image slideshow.

$('.slideshow').slideshow();

5. Available options.

$('.slideshow').slideshow({
delay: 2000,    // delay between slides in ms; 0 = off
height: null,   // if set, overrides ratio
pause: true,    // pause on hover
ratio: 0.5625,  // width:height ratio; 1600x900 assumed
speed: 400,     // default slide speed in ms
startSlide: 0   // 0-based; e.g. 0 is the first slide
});

Change log:

2014-06-07

• update.

---

This awesome jQuery plugin is developed by ryanwalters. For more Advanced Usages, please check the demo page or visit the official website.