Is flip/fade/cube animation possible in a panel of Carousel components?

[cpremkumar]

Hi,

I wanted to know if flip/fade/cube animation is possible when sliding thro' the carousel items. Since Carousel component defaults to Card layout, I thought the animation effect would be possible when sliding between the carousel items.

Here is my code,

Ext.setup({
onReady: function() {

var sportsBox = new Ext.Carousel({
flex: 1,
//indicator: false,
layout: 'card',
cardSwitchAnimation: 'flip',
items:[
{
cls: "sports-1 sports",
html: '#sports-1'
},
{
cls: "sports-2 sports",
html: '#sports-2'
},
{
cls: "sports-3 sports",
html: '#sports-3'
}
]
});

var politicsBox = new Ext.Carousel({
flex: 1,
items:[
{
cls: "politics-1 politics",
html: '#politics-1'
},
{
cls: "politics-2 politics",
html: '#politics-2'
},
{
cls: "politics-3 politics",
html: '#politics-3'
}
]

});

var mainPanel = new Ext.Panel({
fullscreen: 'true',
layout:{
type: 'vbox',
align: 'stretch'
},
items:[sportsBox, politicsBox]
});
}
});

I tried putting in the following lines as shown in above code,

layout: 'card',
cardSwitchAnimation: 'flip',
This doesn't do the job.

Could someone help me?

Thanks,
Prem

[Surinder singh]

open the url only in safari http://www.developerextensions.com/index.php/sencha-cube-carousel

(http://www.developerextensions.com/index.php/sencha-cube-carousel)I think it will help u, there are still some issues, but you can start from it.

30459