unable to auto slide html pages using sencha

i am create simple app using sencha touch 2 + java script + html 5 which change / slide html pages automatically. i write below code to slide html pages using DelayedTask task but the code is not working .

Main.js

Ext.create('Ext.Carousel', {
fullscreen: true,
xtype:'carousel',
cls:'carousel',

defaults: {

    styleHtmlContent: true
},

config: {
    ui : 'light',

},

 listeners:
            {
                'afterrender': function(carousel) {
                    carousel.pageTurner = new Ext.util.DelayedTask(function() {
                        if (this.getActiveIndex() == this.items.length - 1) {
                            this.setActiveItem(0, 'slide');
                        }
                        else {
                            this.next();
                        }
                        this.pageTurner.delay(6000);
                    }, carousel);
                    carousel.pageTurner.delay(6000);
                }
            },

items: [

    {
        html : '<img src="resources/images/Picture1.png" width="100%" height = "100%" align="middle" /> <audio autoplay loop><source src="resources/audio/kalimba.mp3"></audio>',
        style: 'backgroundImage: url(resources/images/bg.png);backgroundRepeat: repeat;backgroundPosition: center'
    },
    {
        html : '<img src="resources/images/Picture2.png" width="100%" height = "100%" margin=0 align="middle" /> ',
        style: 'backgroundImage: url(resources/images/bg.png);backgroundRepeat: repeat;backgroundPosition: center'
    },
    {
        html : '<img src="resources/images/Picture3.png" width="100%" height = "100%" margin=0 align="middle" />',
        style: 'backgroundImage: url(resources/images/bg.png);backgroundRepeat: repeat;backgroundPosition: center'
    },
    {
        html : '<img src="resources/images/Picture3.png" width="100%" height = "100%" margin=0 align="middle" />',
        style: 'backgroundImage: url(resources/images/bg.png);backgroundRepeat: repeat;backgroundPosition: center'
    }
]

});

i write this code to auto side but its not working please help me..

Solution

There are quite many errors in your code. Please try this, as I've tested, it works (changes are only made to listeners):

  listeners:
        {
            'show': function(carousel) {
                carousel.pageTurner = new Ext.util.DelayedTask(function() {
                    if (carousel.getActiveIndex() == carousel.items.length - 2) {
                        carousel.setActiveItem(0, 'slide');
                    }
                    else {
                        carousel.next();
                    }
                }, carousel);
                carousel.pageTurner.delay(1000);
            },

                'activeitemchange': function(carousel){
                    if (carousel.getActiveIndex() == 0) {
                       carousel.fireEvent('show',this);

                    } else

                    carousel.pageTurner.delay(1000);
                },

        },

Some explanation:

afterrender event is replaced by paint event in Sencha Touch 2. In this situation, you can also use show event.
to set delay time after each cardswitch, you need to listen to activeitemchange event

Hope it helps.