20bits

The Slide Transition Pattern is a design pattern used when you want to expose data strongly associated with content currently on the page. An example would be a photo browser (e.g., Flickr) where you would typically have a scrolling list of thumbnails and the currently displayed photo. You don't want the list in another window because the association between the thumbnails and the active photo wouldn't be apparent.

Code speaks louder than words, so here you go. I can only vouch for it working in Firefox and Safari.

• 
  Pretty picture 1
• 
  Pretty picture 2
• 
  Pretty picture 3
• 
  Pretty picture 4
• 
  Pretty picture 5
• 
  Pretty picture 6
• 
  Pretty picture 7
• 
  Pretty picture 8

How it Works

There are two requires parts: a container window and the sliding box. The container window is set to a fixed width, probablu some multiple of the size of each of the items in the list. It has overflow: hidden set so that all items not currently placed inside the window are hidden.

The sliding box is then given a width large enough to contain all the items. Whenever you click on the buttons it is moved to the left (or right) the appropriate distance. The distance is calculated from the dimensions of each of the items in the box.

Usage

The central class is called WidnowBox, which takes three parameters as input.

box

The box containing the items to slide.

className (optional)

The class name associated with one item in the list. Defaults to box-item.

windowContainer (optional)

The container window for the slider. Defaults to the parent node of the slider.

slideWidth (optional)

The number of items to slide by per click (e.g., 2). Defaults to the size of the window minus 1.

That's all she wrote. A sensible extension would be to allow the slider to move more than one unit at a time, but I'll leave that for another day.

Update: I spent a few minutes adding a "slideWidth" parameter (see the Usage section above). I think the effect is better, now, at least by default. It's all configurable.