I recently had a project where I needed to scroll over multiple rows of thumbnails. I needed this functionality on a couple pages of the web site. I didn’t need all the complexity of all the fancy scrollers that are out there now, so I decided to make my own plugin.

The HTML

First, let's make sure we're linking to javascript. Grab jQuery quickly with this:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

If you want to follow along, you can download the script now

The HTML for the plugin is pretty straight-forward. You just need a container with some items in it.

 <div class="scroller">
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>

Next, you’ll need some buttons to navigate over the items

 <div class="scroller-nav">
 <a href="#" id="rowScrollUp">Up</a>
 <a href="#" id="rowScrollDown">Down</a>
</div>

The .scroller-nav container I used is only for CSS positioning and styling. You don’t have to include it if you don’t want to.

Apply the plugin

Now, we can apply our plugin and see if it works.

 <script>
$(function(){
    $('.scroller').rowscroller();
});
</script> 

You should see something like this:

It’s looking a little drab. Let’s apply some css to our nav buttons and our items.

 /*SCROLLER NAV*/
.scroller-nav {
  overflow: hidden;
  border-bottom: 1px solid black;
  text-align: right;
  padding: 10px 0;
  margin-bottom: 25px;
}

.scroller-nav a {
  display: block;
  width: 80px;
  margin-right: 10px;
  float: left;
  background: black;
  color: white;
  text-decoration: none;
  text-align: center;
  font-size: 12px;
  line-height: 25px;
  border: 1px solid black;
}

.scroller-nav a.disabled {
  background-color: white;
  border: 1px solid #aaa;
  color: #aaa;
}

/* SCROLLER VIEWPORT*/
.viewport .scroller-row {
  margin-bottom: 25px;
}

.viewport .scroller-item {
  width: 185px;
  float: left;
  background: black;
  color: white;
  margin: 0 0 0 14px;
  text-align: center;
  line-height: 100px;
}

.viewport .scroller-row .scroller-item:first-child {
  margin-left: 0;
} 

There we go. Now we should see our rows and items starting to take some shape. We can also tell that our “Up” nav button is disabled.

By default, rowscroller will set you up with the following default options

• 3 visible rows
• 3 items in each row
• Scrolls 1 row at a time
• .rowScrollUp and .rowScrollDown classes for your nav buttons
• .disabled class for your disabled nav button

Customizing the row scroller

You can customize these however you want. Let’s try that now.

 <script>
$(function(){
  $('.scroller').rowscroller({
    navUp: '#scroller-up',
    navDown: '#scroller-down',
    visibleRows: 4,
    itemsPerRow: 3,
    rowsToScroll: 4,
    navDisabledClass: 'disabled'
  });
});
</script> 

You’ll notice that the nav buttons can accept classes or IDs, so use whichever you need. I’ve customized my rowscroller to to do the following:

• Use #scroller-up and #scroller-down as the IDs for my nav buttons
• Show 4 rows at a time
• Have 3 items in each row (the default)
• Scroll 4 rows at a time
• And, I kept the default class of .disabled for the disabled state of my nav buttons

That should do it. Let’s see it in action.

Some things to consider

• Because of the way the plugin creates the rows, you won’t be able to use an ordered or unordered list.
• If you have multiple scrollers on a page, you'll have to reference the plugin for each container if you need to configure different options for each. If you don't, your nav buttons will control both instances of the scroller.

Hope this helps you out in one of your projects. You can download the jQuery script and the HTML and CSS used in this tutorial below. If anyone has suggestions for improving the code, feel free to let me know. You can download the files below.

Download just the plugin jquery.rowscroller.js

Or, download the files used in this tutorial.