Reload carousel items

Question

I need to reload the items from my carousel (I clicked on an item and a panel gets destroyed, then when I try to go back, I need to rebuild the carousel)

For this I am removing the items of the carousel by doing:

var len = cards.length;
for(var c = 0; c < len;c++)
this.myCarousel[0].items.remove(cards[0]);

then I set the cards again and set the carousel items again:

this.myCarousel[0].items.append(cards);
this.doLayout();

but after doing this, the cards dont get set right, they just get written on top of each other, no carousel effect gets done. Also the cards start being drawn under the carousel's toolbar, instead of starting below the toolbar.

The first time when I load the cards it works perfectly (when I build the carousel from scratch), but if I delete the previous cards and add them again, they don't get displayed properly, I hope someone can help me.

Thank you in advance

I discovered that the problem I was having was caused by something, the view was getting destroyed elsewhere and that is why the carousel wasn't working. But still I am intrigued why I can't call this.myCarousel.removeAll() or this.myCarousel.doLayout(); maybe it is due to fact that I am adding the carousel by doing this.add(this.myCarousel), instead of adding the carousel directly as an item when I create the view. — marimaf

Joel Nation Joel Nation · Accepted Answer · 2011-06-15T01:31:49

Do the adding and removing on the carousel itself as it has methods to do this:

this.myCarousel.removeAll();
var items = [];
for (...) {
   items.push(<item def>);
}
this.myCarousel.add(items);
this.carousel.doLayout(); // Force the carousel to re-render
this.myCarousel.scrollToCard(0); // This will send the user back to the first card

If the user was at a different card when you run the above (say, if you put this into an orientation check) then you should return them to the correct card like so:

var curIndex = this.myCarousel.items.items.indexOf(this.myCarousel.layout.activeItem);
// Now do removing and adding
this.myCarousel.scrollToCard(this.myCarousel.items.items[curIndex]);

You have to use the index as the item will be removed.

Reload carousel items

2 Answers