Make the second carousel item show slightly

[george.m]

Hello,

I'm using a vertical carousel with two items, and I'm trying to make it clear to the user that it's a carousel they're using. Therefore, assuming that the first carousel item is currently active, I want the second card to be pushed up slightly so that you can partially see it at the bottom.

I've tried the following. Bare in mind it isn't complete but my main thought process is there: If on the first card, it should add a class to the second card which pushes it up. It works to an extend, it applies the style and shows the second card, but then I can't remove it. Has anyone any ideas of how else to implement this?

Any help would be greatly appreciated.

Thanks
George

Sencha code:

          
            xtype: 'carousel',
            direction: 'vertical',
            width: '100%',
            height: '140px',
            listeners: {
                cardswitch: function(){
                    var CurrentPhotoIndex = this.getActiveIndex();
                    var CurrentPhotoItem = this.getActiveItem();


                    if(CurrentPhotoIndex == '0'){
                        Ext.getCmp('carouselitem1').addCls('raisecarouselitem')
                    } else if (CurrentPhotoIndex == '1'){


                    }
                }
            }

CSS code:

.raisecarouselitem {
    -webkit-transform: translate(0,100px) !important;
    -webkit-transition: all 0.1s ease-in-out !important;
}

[mitchellsimoens]

Why can't you remove the css?

[george.m]

It seems as if the addCls() temporarily removes the item from the carousel. I think this because normally, I console log the current index, so I'd get a '0' or '1' being console.log'd as i switch cards, but after I apply the addCls, a '1' is never outputted.

So for example, once the view loads, if I slide the carousel to the second card, it doesn't apply the class because the addCls() hasn't been called yet. Then, when I switch the card back to the first card, the class is applied correctly and does correctly push the second card slightly up. This is where things go dodgy. Whenever I switch cards from this point, the card's content stays in the same position, and the console.log(this.getActiveIndex()) only gets called for the first card so I only get '1' being outputted. It is as if the second card has been removed. A removeCls() will not work, but if I remove the css classes manually in the inspect element, the problem is fixed.

Do you know of any other way that I could apply this feature?