Simple Automatic Gallery Slideshow In jQuery

File Size: 5.57 KB
Views Total: 18549
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Simple Automatic Gallery Slideshow In jQuery

A simple, configurable, automatic gallery slideshow plugin written in jQuery and plain HTML/CSS.

The slideshow automatically fade through a list of images at a given interval. You can also play/pause or navigate throuhg images manually by clicking the controls that will be displayed on hover.

How to use it:

1. Insert the latest jQuery JavaScript library together with the jquery-gallery.js plugin's files into the html file.

<link href="jquery-gallery.css" rel="stylesheet">
<script src="" 
<script src="jquery-gallery.js"></script>

2. Create an image list for the gallery slideshow.

<ul class="gallery-slideshow">
  <li><img src="1.jpg"/></li>
  <li><img src="2.jpg"/></li>
  <li><img src="3.jpg"/></li>
  <li><img src="4.jpg"/></li>
  <li><img src="5.jpg"/></li>
  <li><img src="6.jpg"/></li>

3. Convert the image list to a gallery slideshow with specified interval and height/width. Done.

$(function() {
    // default: 2000
    interval: 3000,
    // default: 500
    width: 600,
    // default: 350
    height: 400

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