This example shows insertion at whatever index on a regular carrotCell. If no value is specified for index in this example, it is assumed to insert or append at the last spot. (Scroll to the last page to see the inserted item if appending at the end.)
1
2
3
4
5
6
7
8
9
prev
next
at indexInserted Items:0
Call the API method insert to add one slide to the carrotCell. Note if more than one slide is passed the calculations will not work correctly. Insert takes the slide markup, and an integer index that tells carrotCell where to insert the slide.
var kitten = $("#insertKitten").carrotCell();
var kittenAPI = $(insertKitten).data("carrotCell");
var someIndex = ... // set it or get it in whatever way
$("#insertKittenAction").bind("click", function(e){
kittenAPI.insert('
insert ' + insertCount + '
', someIndex);
});
Scroll to Inserted
While the above example works, it is not very intuitive to the user when something has been inserted. There is a setting to scroll to the position of the inserted item that can be used.
1
2
3
4
5
6
7
8
9
prev
next
at indexInserted Items:0
By setting scrollToInserted to the boolean true, when an item is inserted, the carrotCell will automatically scroll to show the inserted item.
var kitten = $("#insertKitten2").carrotCell({
scrollToInserted : true
});
Insert Into Infinity
It is also possible to insert into an infinite carrotCell. Be aware that the inserts can cause strange behavior in infinite carousels as inserting an item can cause the entire loop to shift.
1
2
3
4
5
6
7
8
9
prev
next
at indexInserted Items:0
Remove
Removing works in a similar way as inserting, except only an index of the item to be removed need to be provided. If items remaining no longer make up more than 1 page, the previous and next will be disabled.
1
2
3
4
5
6
7
8
9
prev
next
at index
This example shows how slides can be removed. Note removing from infinite and auto scrolling is also possible, though be sure not to count the clones in the index value.
var kitten = $("#removeKitten").carrotCell();
var kittenAPI = $(kitten).data("carrotCell");
$("#removeKittenAction").bind("click", function(){
var myIndex = parseInt($("#removeKittenValue").val());
kittenAPI.remove(myIndex);
});
Impact on Auto Generated Navi
When set to auto generate navi, the navi will update accordingly when elements are removed or inserted so that the page count increases or decreases.
1
2
3
4
5
6
7
8
9
prev
next
at index
If passing in custom names for the navi, make sure the data-navi contains a full list of possible page names otherwise it will default to the integer count. Note that the data-navi is only accessed once during carrotCell creation.
When inserting on a carrotCell that has a custom navi produced by the user, make sure to insert a new navi node manually. After the node is inserted, call the API method updateNavi to add the correct actions.
