Threaded View

  1. #1
    Sencha User
    Join Date
    Sep 2011
    Location
    India
    Posts
    56
    Vote Rating
    0
    raju0574 is on a distinguished road

      0  

    Question Answered: image slide show with carousel in sencha touch randomly

    Answered: image slide show with carousel in sencha touch randomly


    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
    Code:
    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.

  2. you could use a delayed task for this.


    Code:
                {                        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>'}
                    ]
                }