Carousel bug when having more than 3 cards

[modder]

When I use up to three cards, the carousel works fine. But as soon as I use four cards, there is a bug:

The first and the fourth card are overlapping* until I slide to the second card. After sliding back to the first card again, the fourth card disappeared.

(overlapping = contents of 1st and 4th card are shown. 4th card is in foreground)

What is going on here? I don't understand. :-?

This is my js:

Ext.setup({
onReady: function() {
// Create a Carousel of Items
var carousel = new Ext.Carousel({
defaults: {
cls: 'card'
},
items: [{
cls: 'tab1',
html: 'Tab 1'
},
{
cls: 'tab2',
html: 'Tab 2'
},
{
cls: 'tab3',
html: 'Tab 3'
},
{
cls: 'tab4',
html: 'Tab 4'
}]
});


new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [carousel]
});
}
});