jCarousel: Can you remove all items and rebind to a new collection?
11,315
Solution 1
You can do this but you need to keep a reference to the carousel around and call reset
on it. This can be achieved by using the initCallback
option you pass to the jcarousel function.
function carousel_callback( carousel, state) {
// BWA-HA...I have the carousel now....FEEL THE POWER!
// reset empties it out
$('#reset-caro').click( function( evt ) {
carousel.reset();
});
// here's how to call add
$('#add-to').click( function( evt ) {
// ..this just adds to the first spot..modify as needed
carousel.add(0, "<li>O HAI!</li>");
});
}
$(document).ready(function() {
$('#mycarousel').jcarousel( {
initCallback: carousel_callback
});
});
Here's my HTML:
<a id="reset-caro" href="#">reset</a>
<a id="add-to" href="#">add</a>
<ul id="mycarousel" class="jcarousel-skin-tango">
<li>MOM</li>
<li>DAD</li>
<li>BROTHER</li>
<li>SISTER</li>
</ul>
Solution 2
In addition to the above, please also specify the size of your new carousel.
carousel.size(x);
This should eliminate the white empty boxes in IE (as described above).
Thanks, Nik
Author by
Jim G.
Updated on June 14, 2022Comments
-
Jim G. about 2 years
jCarousel documentation states the following:
- By passing the callback function itemLoadCallback as configuration option, you are able to dynamically create (li) items for the content.
{...} - jCarousel contains a convenience method add() that can be passed the index of the item to create and the innerHTML string of the item to be created.
My Question:
Is it possible to remove all items and rebind to a new collection?
BTW: I don't necessarily need a "convenience method" to do this. I'm very open to workarounds.
FYI: This strategy doesn't seem to work. - By passing the callback function itemLoadCallback as configuration option, you are able to dynamically create (li) items for the content.
-
Jim G. almost 15 yearsThanks a lot for the code! I have two remarks: 1. FF 3.5.2 and Chrome: When I click 'reset' the first time, the items disappear (good), but they leave behind white boxes (bad). Other than that, the code works flawlessly. // 2. IE8: Does not handle this code gracefully. My CPU spikes to 50%. [This may speak to a jCarousel weakness, rather than a logic bug.]
-
M.Sworna Vidhya almost 15 yearsYeah, I noticed both of those issues as well. Both are all on jCarousel. reset left those boxes no matter what I tried.
-
nerdabilly almost 14 yearsIt's probably a little late for this, but I ran into this problem today also. To fix the white boxes, there's a style in the skin.css called .jcarousel-item-placeholder. it has a background of "#fff". if you remove this line or set it to background:none, you won't see the white boxes.