pre/post callback between each carousel transition

[Thierryg]

Hi,

I have a carousel and i wanna know if it is possible to launch an action when i leave a one item and another action when switch to.

In other words, can i define callbacks (pre and post) called between item transition.

Indeed, i wanna start and/or stop some points before or after a transition.

I join a diagram that explain the state diagram i want to use.

Thanks in advance for your reply.

Regards

[mitchellsimoens]

You can use the activeitemchange event with the before and after order option.

[Thierryg]

Thanks, it works fine as expected using the following code :

        horizontalCarousel.on("activeitemchange", function(me, value, oldValue, index)
        {
            console.log(horizontalview[this.getActiveIndex()] + '-' + this.getActiveIndex());
        });

And my whole code :

var Myapp = Ext.application(
{
    name:   'Myapp',
    launch: function()
    {
        var horizontalCarousel;
        var verticalCarousels = [];
        var items, i, j;
            
        /* ------------------------------------------------ */
        /*                 Vertical items                   */
        /* ------------------------------------------------ */
        //alert("nbHorizontalItems="+nbMaxMainScreen);
        for ( i=0 ; i<nbMaxMainScreen ; i++ )
        {
            items = [];
                
            /* ------------------------------------------------ */
            /*              Horizontal items                    */
            /* ------------------------------------------------ */
            //alert("nbVerticalItems="+nbMaxSubScreenPerMainScreen[i]);
            for ( j=0 ; j<nbMaxSubScreenPerMainScreen[i] ; j++ )
            {
                //alert("i="+i+"/j="+j);
                //alert("content["+i+"]["+j+"]="+mainScreen[i][j]);
                items.push(
                {
                    html : mainScreen[i][j],
                    style: 'background-color: #FFFFFF'
                });
            }


            /* ------------------------------------------------ */
            /*             Fill vertical's carousel             */
            /* ------------------------------------------------ */
            verticalCarousels.push(
            {
                xtype:               'carousel',
                direction:           'vertical',
                cardSwitchAnimation: 'slide',
                directionLock:       true,
                id:                  vcarousselID[i],
                items:               items,
                itemConfig:
                {
                    cls: 'my-carousel-item'
                }
            });
        }
        
        /* -------------------------------------------------- */
        /* Link the vertical carousel with the horizontal one */
        /* -------------------------------------------------- */
        horizontalCarousel = Ext.Viewport.add(
        {
            xtype:               'carousel',
            direction:           'horizontal',
            cardSwitchAnimation: 'slide',
            id:                  'hcarouselID',
            items:               verticalCarousels
        });


        /* -------------------------------------------------- */
        /* Define callbacks for horizontal transition         */
        /* -------------------------------------------------- */
        horizontalCarousel.on("activeitemchange", function(me, value, oldValue, index)
        {
            console.log(horizontalview[this.getActiveIndex()] + '-' + this.getActiveIndex());






        });
        
        /* -------------------------------------------------- */
        /* Initialize the default horizontal carousel         */
        /* -------------------------------------------------- */
        //horizontalCarousel.setActiveItem(hcurcarousel);           // Horizontal init
        //horizontalCarousel.getActiveItem().setActiveItem(0);      // Vertical   init
    }
});