Dynamically add images to carousel in sencha touch 2

A Carousel is used for displaying multiple pages, but it will show only one of its pages at a time and allows you to swipe through with your finger.

Now lets see, how to add dynamic images to carousel component.

Before that, lets first create a carousel component using Ext.create() with configuration.

var carousel = Ext.create('Ext.Carousel',{
  fullscreen: true,
  itemId: 'carousel',
  id: 'carousel'
  });

Now 'carousel' variable will contains the reference of carousel component. image component can be added using Ext.Img. Now we will be adding 3 images to the carousel component using add() (3 times).

carousel.add({xtype:'image',src:'image URL'});
carousel.add({xtype:'image',src:'image URL'});
carousel.add({xtype:'image',src:'image URL'});

Carousel will display only one image at a time you can view furthur images by swipe with your fingers .
In order to display carousel on screen, we need to add it on Viewport.

Ext.Viewport.add(carousel);

Hope you enjoyed this Post.