Slideshow Plugin

Introducing the slideShow jQuery plugin — a flexible image gallery and slideshow with multiple transition effects, auto-play, pause-on-hover, and navigation controls. This is a plugin I have been building for a few client projects, and I am sharing it here as a free download.

View Demo

HTML Structure

Wrap your slides in an unordered list inside a container div. The plugin expects this structure:

<div id="slideshow">
    <ul class="slides">
        <li><img src="slide1.jpg" alt="Slide 1" /></li>
        <li><img src="slide2.jpg" alt="Slide 2" /></li>
        <li><img src="slide3.jpg" alt="Slide 3" /></li>
    </ul>
    <div class="controls">
        <a href="#" class="prev">&laquo;</a>
        <div class="pagination"></div>
        <a href="#" class="next">&raquo;</a>
    </div>
</div>

Initialization

$(document).ready(function() {
    $('#slideshow').slideShow({
        speed: 600,
        delay: 4000,
        easing: 'easeInOutQuad',
        effect: 'fade',
        auto: true,
        pauseOnHover: true,
        showPagination: true,
        numElement: true,
        prevSelector: '.prev',
        nextSelector: '.next',
        paginationSelector: '.pagination'
    });
});

Parameters

• speed — transition duration in milliseconds (default: 600)
• delay — time between automatic slide transitions in milliseconds (default: 4000)
• easing — jQuery easing function name (default: 'swing'; requires the Easing Plugin for additional functions)
• effect — transition effect: 'fade', 'slide', or 'slideVertical'
• auto — enable or disable automatic playback (default: true)
• pauseOnHover — pause auto-play when the mouse is over the slideshow (default: true)
• showPagination — generate dot indicators for each slide (default: true)
• numElement — show a numeric counter in the pagination area (e.g. "2 / 5") instead of or alongside dots
• prevSelector — CSS selector for the "previous" button
• nextSelector — CSS selector for the "next" button
• paginationSelector — CSS selector for the pagination container

Transition Effects

Three transition effects are available:

• fade — cross-fade between slides
• slide — horizontal sliding transition
• slideVertical — vertical sliding transition

The easing parameter works with any easing function registered with jQuery. The 'easeInOutQuad' value in the example above requires the jQuery Easing Plugin. For a built-in option, use 'swing' or 'linear'.

Notes

All slides must have the same dimensions. The plugin does not resize images — set a fixed width and height on the container via CSS and ensure your images match those dimensions.

The plugin is designed to be unobtrusive: if JavaScript is disabled, the slides are visible as a plain list of images.