Ever wanted to have a simple transition object to allow for Slideshow style effects without all the unnecessary overhead of some of the larger modules available?

This jQuery plugin offers a very lightweight, customizable solution, offering both fade and sliding transition types, color customization and sizing options.

Using your existing markup and CSS for the content, this plugin simply sizes and rotates through a list of tagged elements in order to build the slideshow. Here is a quick example:

Example HTML:

<div id="my-slideshow">
  <div class="slide"><h1>Slide #1</h1></div>
  <div class="slide"><h1>Slide #2</h1></div>
  <div class="slide"><h1>Slide #3</h1></div>
</div>

Example JavaScript:

$(document).ready(function()
{
  $('#my-slideshow').gwSlideshow({
    delay            : 2000,    // 2 seconds visibility before transition
    transition       : 'slide', // Valid types: fade or slide
    transition_speed : 1000,    // How fast transition itself takes place
    border           : '1px solid #ffffff',
    bg_color         : '#444444',
    height           : 130,
    width            : 430
  });
});

To see the previous code in action, simply visit this demo.