You can scroll through these elements by clicking on the arrow
buttons or using the left and right arrow keys from your keyboard.
For this example we can only scroll by clicking on the arrow buttons
or using the left and right arrow keys from your keyboard because we
are aiming for a minimal setup. It's important to understand how
this example works because it teaches you the theory behind HTML
scrolling. Understanding this helps you to build any kind of
scrolling you want. We are using a very primitive look and feel for
most of these demos because we are focusing only on their
functionality and not their visual style. On your own pages you can
use standard HTML/CSS techniques to style your scrollables.
This is how you lay out your scrollables. You must have a root
element for the scrollable and inside that another wrapper element
for the items. The items can contain anything you want including
images, Flash, HTML text and forms. Items can have any amount of
child elements and they can be any size. Here we have just simple
thumbnail images from www.flickr.com:
The scrollable tool looks for elements whose CSS class name
is prev and next and automatically binds
the seeking action to them. You can specify other names for the CSS
class names to avoid any clashes with your existing CSS.
Here are the minimal CSS settings for enabling a horizontal
scrollable. Except for the width property these
settings don't have any impact on the appearance. You will have
probably have to tweak your width property yourself to
have as many items visible at once as you want.
CSS coding is actually the hardest part of making scrollables and
it's recommended that you have more than just a basic understanding
This is the easy part. Just select the elements from the page that
will be made scrollable. This is achieved with
a jQuery selector followed by
the scrollable constructor. This constructor accepts a
configuration object as the first argument but in this minimal setup
we can stick with the default settings.