This is a message.

Add and remove items from scrollable

This demo shows you how to add and remove scrollable items. Notice how the scrollable navigator grows and the next/prev buttons behave correctly.


standalone demo

You can add items to a circular scrollable as well. This page's source code is identical to the minimal setup except that the add and remove buttons were added.

A new item

The item we are adding is the child element of DIV#newItem: 

<div id="newItem" style="display:none">
  <div class="added">
    <!-- scrollable items can have anything and any amount -->
    <img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />
    <img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" />
    <h3>New Item</h3>
  </div>
</div>

HTML

addItem function

Every added item is a clone of a single DIV. We use addItem method from the Scrollable API to add new items. It takes one argument which is the new item. 

// initialize scrollable together with the navigator plugin
$("#scrollable").scrollable().navigator();

JavaScript

Photo credits »