image slide show with carousel in sencha touch randomly

[raju0574]

Hi all,i am carousel to get dispaly images as a slide show ,in which images are moving by clicking or by moving,Here what i want to do is just keep on going that image slide show with some time peroid,just like simple slide show,for that what i have to do,my code is

var carousel1 = new Ext.Carousel({
flex:7.3,
centered:true,


            defaults: {
               cls: 'card' 
            },
            items: [{
                html: '<p><img src="resources/imgs/sidcorrect.jpg"></p>',
				cls:'card card1'
            },
            {
                
                html: '<p><img src="resources/imgs/sname320250.jpg"></p>',
				cls:'card card2'
            },
            {
                
               html: '<p><img src="resources/imgs/search350.jpg"></p>',
			   cls:'card card3'
            }]
        });
Ext.panel({
layout: {
                type: 'vbox',
                align: 'stretch'
            },
items:[carousel1]
});

This my code to display 3 images one after another by clicking or by moving,
What i have to do to move images one after another without performing any actrion.

Please let me know as soon as possible.

Thanks in advance.

[NickT]

you could use a delayed task for this.

            {                        cls:'home_carousel',                xtype:'carousel',
                direction: 'horizontal',
                height:175,
                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:'<div class="ccard">one</div>'},
                    {html:'<div class="ccard">two</div>'},
                    {html:'<div class="ccard">three</div>'}
                ]
            }

[raju0574]

thank you its working fine,but one more thing i want change is the style of animation and speed of slide its showing very fastly,not that delay the display animation and speed,how can we change that.

[e-mike]

Ext.define('Ext.carousel.RotatingCarousel', {	extend: 'Ext.carousel.Carousel',
	alternateClassName: 'Ext.RotatingCarousel',
	xtype: 'rotatingcarousel',
	config: {
		delay: 3000,
		start: true,
		listeners: {
			tap: {
				fn: function() {
					this.pause();
				},
				element: 'element'
			},
			swipe: {
				fn: function() {
					this.start();
				},
				element: 'innerElement'
			}
		}
	},
	initialize: function() {
		if (this.config.start) {
			this.start();
		}
	},
	rotate: function() {
		if (this.timeout) {
			clearTimeout(this.timeout);
		}
		if (this.getActiveIndex() === this.getMaxItemIndex()) {
			this.setActiveItem(0, 'slide');
		}
		else {
			this.next();
		}
		this.timeout = Ext.defer(this.rotate, this.config.delay, this);
	},
	start: function(delayStart) {
		this.timeout = Ext.defer(this.rotate, delayStart || this.config.delay, this);
	},
	pause: function(delayStart) {
		if (this.timeout) {
			clearTimeout(this.timeout);
		}
		if (delayStart) {
			this.start(delayStart);
		}
		return this;
	},
	stop: function(delayStart) {
		this.pause(delayStart);
		this.setActiveItem(0, 'slide');
		return this;
	}
});

[Frank]

Thanks for your tip, it's helpful!

[MacHellerOgden]

Thank you! This is great—very helpful indeed. One thing: I'd love to see the automatic progression stop if there's a tapmove event on the carousel, effectively turning it back into a normal carousel and giving complete control back to the user. As it is, the slides keep progressing automatically even if the user tries to take over. I'm working on this now and if I can figure it out, I'll post my solution. Thanks again.

[sushmak_bs]

this is working fine thank u.. But i want the image slide show automatically without the user interaction how do i do that? please help me

thanks in advance..