Results 1 to 10 of 10

Thread: image slide show with carousel in sencha touch randomly

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Sep 2011
    Location
    India
    Posts
    56
    Vote Rating
    0
      0  

    Question 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>'}
                    ]
                }

  3. #2
    Sencha Premium Member
    Join Date
    May 2008
    Location
    Pasadena, California
    Posts
    172
    Answers
    27
    Vote Rating
    2
      1  

    Default

    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>'}
                    ]
                }

  4. #3
    Sencha User
    Join Date
    Sep 2011
    Location
    India
    Posts
    56
    Vote Rating
    0
      0  

    Default

    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.

  5. #4
    Sencha User
    Join Date
    Jul 2009
    Posts
    16
    Vote Rating
    2
      2  

    Default Sencha Touch 2 - Rotating Carousel

    Code:
    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;
    	}
    });

  6. #5
    Sencha User Frank's Avatar
    Join Date
    Mar 2007
    Posts
    186
    Vote Rating
    1
      0  

    Default

    Thanks for your tip, it's helpful!
    Ext Every Day!
    ajaxjs.com

  7. #6
    Sencha User
    Join Date
    Feb 2012
    Location
    Chicago, IL
    Posts
    7
    Vote Rating
    0
      0  

    Default

    Thank you! This is greatvery 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.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •