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. Also note that you can also click on the new items.
This pages source code is identical to minimal setup except that those add and remove buttons were added.
Add and remove functions
You add and remove items using the "standard" jQuery methods append and remove. After being added you must call Scrollables' API method reload which will take care of updating the navigational buttons and click handlers of the scrollable items.
function addItem() {
// get handle to scrollable API
var api = $("div.scrollable").scrollable();
// append new item using jQuery's append() method
api.getItemWrap().append(
'<img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg"/>'
);
// rebuild scrollable and move to the end to see what happened
api.reload().end();
}
function removeItem() {
// get handle to scrollable api
var api = $("div.scrollable").scrollable();
// move in 1 millisecond to the end to see what will happen
api.end(1);
// remove last item with jQuery's remove() method
api.getItems().filter(":last").remove();
// rebuild scrollable and go one step backward
api.reload().prev();
}
Show this demo as a standalone page.
