PDA

View Full Version : horizontal in vertical carousel



mock5
12 Feb 2011, 3:17 AM
Hi!

How can I put more than one horizontal carousel in vertical carousel?
I can put one carousel in vertical, but another one doesn't work.

Here is my example:
http://otoko.pl/test



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {

var caro = new Ext.Carousel({
renderTo: 'carousel1',
width: 1025,
height: 749,
listeners: {
click: {
element: 'el',
fn: function(c){
//carousel.setActiveItem(parseInt(c.target.id), { type: 'slide', direction: 'left'});
//alert(c.target.tagName);
if(c.target.className=="hiper") {
caro.setActiveItem(parseInt(c.target.id)-1, { type: 'slide', direction: 'left'});

}
}
}},
defaults: {
cls: 'card'
},
items: [{
html: '<h1>slide no 1</h1>'
},
{
html: '<h1>slide no 2</h1>'
},
{
html: '<div id="carousel2"></div>'
},
{
html: '<h1>slide no 4</h1>'
},

{
html: '<div id="carousel3"></div>'
}]
});



new Ext.Carousel({
renderTo: 'carousel2',
width: 1025,
height: 749,
ui: 'light',
direction: 'vertical',
defaults: {
cls: 'card'
},
items: [{
html: '<h1>slide no 3 - part 1<br/><br/>V scroll V</h1>'
},
{
html: '<h1>slide no 3 - part 2</h1>'
},
{
html: '<h1>slide no 3 - part 3</h1>'
},
{
html: '<h1>slide no 3 - part 4</h1>'
},
{
html: '<h1>slide no 3 - part 5</h1>'
},
{
html: '<h1>slide no 3 - part 6</h1>'
},
{
html: '<h1>slide no 3 - part 7</h1>'
}]
});


new Ext.Carousel({
renderTo: 'carousel3',
width: 1025,
height: 749,
ui: 'light',
direction: 'vertical',
defaults: {
cls: 'card'
},
items: [{
html: '<h1>slide no 5 - part 1<br/><br/>V scroll V</h1>'
},
{
html: '<h1>slide no 5 - part 2</h1>'
},
{
html: '<h1>slide no 5 - part 3</h1>'
}]
});



}
});





<div id="carousel1"></div>