Minimal setup for scrollable

Here is a scrollable with 3 items in total and each of those items contains 4 images:

standalone demo

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.

HTML code

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:

<div style="margin:0 auto; width: 634px; height:120px;">
<!-- "previous page" action -->
<a class="prev browse left"></a>
 
<!-- root element for scrollable -->
<div class="scrollable" id="scrollable">
 
  <!-- root element for the items -->
  <div class="items">
 
    <!-- 1-5 -->
    <div>
      <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
      <img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" />
      <img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" />
      <img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" />
    </div>
 
    <!-- 5-10 -->
    <div>
      <img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" />
      <img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" />
      <img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" />
      <img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />
    </div>
 
    <!-- 10-15 -->
    <div>
      <img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" />
      <img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" />
      <img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" />
      <img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" />
    </div>
 
  </div>
 
</div>
 
<!-- "next page" action -->
<a class="next browse right"></a>
</div>

HTML

Next/prev buttons

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.

CSS code

Our example is using two CSS files: scrollable-horizontal.css for basic setup for the scrollable and scrollable-buttons.css for the next/prev action buttons.

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.

/*
root element for the scrollable.  when scrolling occurs this
element stays still.
*/
.scrollable {
  /* required settings */
  position:relative;
  overflow:hidden;
  width: 660px;
  height:90px;
}
 
/*
root element for scrollable items. Must be absolutely positioned
and it should have a extremely large width to accommodate scrollable
items.  it's enough that you set width and height for the root element
and not for this element.
*/
.scrollable .items {
  /* this cannot be too large */
  width:20000em;
  position:absolute;
}
 
/*
a single item. must be floated in horizontal scrolling.  typically,
this element is the one that *you* will style the most.
*/
.items div {
  float:left;
}

CSS

CSS coding is actually the hardest part of making scrollables and it's recommended that you have more than just a basic understanding of it.

JavaScript setup

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.

$(function() {
  // initialize scrollable
  $(".scrollable").scrollable();
});

JavaScript

Photo credits »