Ben L. Williams
UX Designer / UI Developer

Resources

Resources » BLW Slider

BLW Slider

jQuery Plugin Documentation

The BLW Slider is a jQuery plugin that will allow you to slide through a list of items, one "page" at a time. Just follow the simple HTML structure and customize to your liking.

You may use the BLW Slider on whatever you want. The only stipulation is that you give credit back to me, by referencing benlwilliams.com/resources, if only in the source code. And contact me if you have anything to add/share/fix.

Documentation

So far, this has only been tested with jQuery version 1.5.2.
A simple working example can be found at the bottom of this page.

The HTML

Below is the bare minimum HTML.

Some notes on the HTML

The CSS

The following CSS code gives you just the basics, for a plain looking BLW Slider. You can use this as a starting point and fancy up with your own edits.

Some notes on the CSS

Most of the styles above are optional and will produce the slider seen at the bottom of the page. But the list below are a few must haves. Remember that you can use any class names you want, but the rules that I'm listing below must still be followed on the actual elements being described.

The JavaScript

Initialize the BLW slider by binding it to the wrapping div. In this example the " .blwSliderOuterWrap " div.

You can also set some optional values. Below are the options, followed by their default values and a comment describing for other possible values.

Full Working Example

  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five
  • Item Six
  • Item Seven
  • Item Eight
  • Item Nine
  • Item Ten
  • Item Eleven
  • Item Twelve
  • Item Thirteen