Basic Responsive Image Slideshow Plugin For jQuery

Basic Responsive Image Slideshow Plugin For jQuery
File Size: 10.6 KB
Views Total: 1076
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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


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