Add and remove items from scrollable
Scrollable demo 10 / 11 : 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.
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>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.
function addItem() {
// get handle to scrollable API
var api = $(".scrollable").data("scrollable");
// use API to add our new item. after the item is being added seek to the end
api.addItem($("#newItem div").clone()).end();
}
Show this demo as a standalone page.
