View Full Version : Carousel loop

20 Sep 2010, 1:51 AM
Is it possible to 'loop' a carousel? with that I mean, when you are at the last card (of a carousel) and you swipe to get the next, it goes back to the first.

20 Sep 2010, 3:31 AM
Never mind, i already figure out a way.

I add an extra panel to at the end and with a listener I check when the user switches to this panel. When that happens, the app sets the first panel as the active card. Only drawback, animation for 2 panels, instead of one.

20 Sep 2010, 4:18 AM
Isnt it easier to just listen to the 'beforecardswitch'-event on the carousel.
In the event, check if you are at the last page, then use .setCard(0, animation) and return false; to prevent the switch to the next page.

20 Sep 2010, 7:57 AM
beforecardswitch doesn't fire if you are in the last page and try to go forward

20 Sep 2010, 8:18 AM
Dont have my dev-env in front of me.

But extending the carousel then and overriding the prev() and next() ??

If im not wrong there is some examples here on the forums for just an infinite loop carousel.

21 Sep 2010, 5:55 AM
can you link me a working example?

all that i found inside the forum doesn't work for me...

24 Sep 2010, 4:54 AM
I built this little hack, could easily be made more generic as I hardcoded to my number of slides. I wanted to fire the looping when the panel that contains the carousel is activated, and stop it when the panel is deactivated. So on a panel that contains a carousel that I want to loop indefinitely, give the carousel an id ('caroHome' in my case) and add the following listener:

listeners: {
activate: function(card){

var moveForward = function(){
var caro = Ext.getCmp('caroHome');
var iCaroCard = caro.getActiveIndex();
if(iCaroCard >= 4)
caro.setCard(0, 'slide');
caro.setCard(iCaroCard + 1, 'slide');


intInterval = setInterval(moveForward, 5000);

deactivate: function(item){

Lastly, intInterval needs to be a global variable.

Hope that helps somebody :)

3 Jul 2012, 9:40 PM
Since, ST is for mobile devices, you should make sure the DOM is light weight. Adding one more panel is not a good idea for this scenario.

The best way to do this, add store to the carousel. fill the data into that store. Like, id, index, name something.

You can achieve this by checking the item where you are, what is the starting item, ending item on activeitemchange

This code for ST2. There is another listener on ST1.

listeners : {
'activeitemchange' : function(carousel, newitem, olditem, opts) {