HTML slideshows for jQuery.

Click to find out more

The contents of this slide can be completely customised using CSS and degrades nicely when styles are turned off.

WideSlide : a slider for HTML content

Sliders are great, aren't they? What better way to showcase your best work or featured news than putting them on a loop and fading them nicely between each other. Sexy.

Recently, however, I had a need to transition between not only images, but HTML content as well. I had a good search around for a tutorial or jQuery plugin to accomplish this but didn't find anything. And so WideSlide was born.

WideSlide is a slider designed to scale with the browser window. A traditional slider is defined by the size of the images and has no inherently customisable content (like text) - I needed something which was capable of showing not only super wide images (without scrollbars) but within which I could put any (exception is Flash, Flash doesn't behave well with transitions. Bad Adobe.) HTML and have it display on a loop.

This demo shows WideSlide in a full width context but with a quick modification of the CSS the slider can be any size you want. It can also run multiple instances on the page for those times when bigger is better.

Installation & UsageJump to download ↓

Installing and using this plugin is super simple; simply include the plugin JavaScript and CSS files and with single line of code your markup will be transformed into a beautiful slider of goodness. 

<link type="text/css" rel="stylesheet" media="screen" href="wideslide.css" />

<script type="text/javascript" src="jquery.wide.slide.pack.js"></script>
<script type="text/javascript">

    $(function() {
        $("#wide_slider").wideSlide();
    });

</script>

Your HTML markup should be in the following format: 

<div id="wide_slider">

    <div><!-- Start of slide; do not give this an ID -->
        <div id="slide_1">
            <!-- Slide content goes in here -->
        </div>
    </div><!-- End of slide -->

    <div><!-- Start of slide; do not give this an ID -->
        <div id="slide_2">
            <!-- Slide content goes in here -->
        </div>
    </div><!-- End of slide -->

</div>

OptionsJump to download ↓

There are a number of options available to the plugin; below is the plugin implementation shown with all available options and their defaults: 

$(function() {
    $("#wide_slider").wideSlide(
      {
         // The length of time a slide is shown on screen in milliseconds
         pauseTime: 5000,
         // Boolean as to whether the slider pauses when the mouse is over the slide area
         pauseOnHover: true,
         // The transition effect; can be 'fade', 'slideDown' or 'random'
         effect: 'fade',
         // The duration of the transition; can be 'slow', 'fast' or in milliseconds
         transitionSpeed: 600
      }
     );
});

Download

Download WideSlide v1.0

Version: 1.0
Size: 3Kb (packed) / 4Kb (unpacked)
Requires: jQuery 1.4+
Release Date: 16th Nov 2010

Browser CompatabilityJump to download ↑

WideSlide has been tested on and is compatible with the following browsers (other browsers and versions may be compatible but have not been tested, if it works for you let me know and I can update this list):

DevelopmentJump to download ↑

This plugin is simple and was developed for my own purposes, as a result it lacks a lot of functionality that may be expected in such a plugin. I don't have the time to develop it any further than was necessary for my project. However, I actively encourage the plugin's development if anybody wants to do so.

So, with that in mind, feel free to fork away on GitHub and let me know if you want your changes merged into the master.

Also, please get in touch in you use the plugin - I'd love to see how it's being used in the wild.

Change Log