How to display second item of Card Layout in Secha Touch

Question

I have 3 card items of card layout, If i click from the other view related to second card item, then i want to display second card item, and but could not swip front side, only swip back side with two card of 1 st and 3rd.

Here is the my code of:

Ext.define('MyApp.view.Main', {
 extend: 'Ext.carousel.Carousel',
 requires: ['Ext.TitleBar'],
 alias: 'widget.mainmenuview',
 config: {
   layout: {
     type: 'card',
   },
   indicator: false,    
   items:[
   {
    xtype:'firstpage',
    cls: 'firstpage', 
    scrollable: false,   
   },
   {
    xtype:'secondpage',
    cls: 'secondpage',    
   },
   {
    xtype:'thirdpage',
    cls: 'thirdpage',

   },

   ]

 }//end of config
});

This is the my card layout. Here I want to display secondpage of card item. it display ok by doing this, but could not swip to previous card, which is going to back.

Ext.define('MyApp.view.Main', {
     extend: 'Ext.carousel.Carousel',
     requires: ['Ext.TitleBar'],
     alias: 'widget.mainmenuview',
     config: {
       layout: {
         type: 'card',
       },
       indicator: false,    
       items:[
 {
        xtype:'secondpage',
        cls: 'secondpage',    
       },
       {
        xtype:'firstpage',
        cls: 'firstpage', 
        scrollable: false,   
       },

       {
        xtype:'thirdpage',
        cls: 'thirdpage',

       },

       ]

     }//end of config
    });

I know, In cardlayout, first card item display always first, But in my condition. Display second item(secondpage) when load Main.js file. and Swip both side, front side first page display and back side thirdpage display.

How to do this, please guide me.Thanks in Advance.

Edit:

I solve this problem but when getting second items, then why load first item then second item. it means whenever display second items, few second first itesm shows.

Ext.define('MyApp.view.MenuSwipTest', {
 extend: 'Ext.carousel.Carousel',
 requires: ['Ext.TitleBar'],
 alias: 'widget.menuswip',
 config: {
 // activeItem: 1,
 layout: {
   type: 'fit', 
 },
 indicator: false, 
 items:[
 {
  xtype:'homepage',
  cls: 'homePage', 
    //scrollable: false,   
  },
  {
    xtype:'menupage',
    cls: 'menuPage', 
  },

  {
    xtype:'categorypage',
    cls: 'categoryPage',
  },
   ]
},
initialize : function(){ 
  console.log('launch Menu Test'); 
  this.setActiveItem(1);
 },//end of config
});

I have also try activeItem:1 in config, but nothing happen any change.

Answer 1

use this property in your carousel config:

config: {
  // .... other config properties ...
  activeItem: 1
}

Answer 2

Just like this.. use setActiveItem();

   var main = Ext.create('widget.mainmenuview');

    if(condition) {
       main.setActiveItem(1);
    }