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.

Download the blwslider.zip

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.


		<div class="blwSliderOuterWrap">
  <div class="blwSliderWrap">
    <ul class="blwSlider">
      <li>Item One</li>
      ...
      <li>Item Thirteen</li>
    </ul>
  </div><!-- close .blwSliderWrap -->
  <a class="prev">«</a>
  <a class="next">»</a>
</div><!-- close .blwSliderOuterWrap -->

Some notes on the HTML

The .prev and .next buttons are the only required class names in the above HTML. The other class names are just used for syling and could be changed to anything you want.
The .prev and .next buttons can be any element, as long as they have the .prev and .next class names.
Put anything* you want in the list items.
* has not yet been tested extensively

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.


		.blwSliderOuterWrap {
  width:100%;
  height:80px;
  float:left;
  margin-bottom:1em;
  position:relative;
}

.blwSliderWrap {
  width:708px;
  height:78px;
  float:left;	
  border:1px solid #aaa;
  overflow:hidden;
  margin-left:20px;
}

.blwSlider,
.blwSlider > li {
  margin:0;
  padding:0;
  float:left;
  display:inline-block;
  list-style-type:none;	
  background:none;
  position:relative;
  height:80px;
}

.blwSlider > li {
  width:131px;
  margin-left:9px;
  height:58px;
  margin-top:11px;
  text-align:center;
  line-height:58px;
  font-size:14px;
  font-weight:bold;
  background:#ccc;
}

.prev,
.next {
  display:block;
  position:absolute;
  width:20px;
  color:#fff;
  background:#666;
  line-height:80px;
  text-align:center;
  top:0;
  left:0;
  bottom:0;
  cursor:pointer;
}
.next {
  right:0;
  left:auto;
}

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 .blwSliderWrap div should be a fixed width and must have overflow:hidden
The immediate children of the ul.blwSlider must be floated left.
Don't forget that .prev and .next are the only required class names. Without them, you can't slide to the pages.

The JavaScript

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


		$('.blwSliderOuterWrap').blwslider();

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


		$('.blwSliderOuterWrap').blwslider({
  startPage: 1, // any number. non existent pages will make it start at 1
  speed: 'slow', // 'normal', 'fast', number of milliseconds
  easing: 'swing' // 'linear'
});

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

< >

Web Developer

Resources