PDA

View Full Version : Carousel in Carousel



freshface
28 Aug 2010, 8:15 AM
How can i do this?
Can i set an item for a carousel item? Like this;




Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
// Create a Carousel of Items
var carousel1 = new Ext.Carousel({
defaults: {
cls: 'card'
},
items: [{
html: '<h1>Carousel</h1><p>Navigate the two carousels on this page by swiping left/right or clicking on one side of the circle indicators below.</p>'
},
{
title: 'Tab 2',
html: '2'
},
{
title: 'Tab 3',
html: '3'
}]
});

var carousel2 = new Ext.Carousel({
direction: 'vertical',
ui: 'light',
activeItem: 0,
defaults: {
cls: 'card'
},
items: [{
items: [carousel1]
},
{
title: 'Tab 2',
html: '2'
},
{
title: 'Tab 3',
html: '3'
}]
});

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

msoriano
4 Sep 2010, 12:31 AM
does anyone know if this has been solved?
is it possible to have a carousel in a carousel?

if i swiped to a card which is also scroll:vertical, i want to add a small carousel in the beginning for photos swiping left and right to only control that carousel within the card.

For example, an article with a featured photo at the top. then scrolling down to read more. or swiping the featured photos.

thanks

cryovirus
13 Sep 2010, 9:49 PM
hey^^, yes it's possible...

you just have to add one carousel into another like:


var outercarousel = new Ext.Carousel({
// your code
});

var innercarousel = new Ext.Carousel({
// your code
});
outercarousel.add(innercarousel);
// or if you have a panel around the first:
panel.getComponent(outercarousel).add(innercarousel);


something like this should work

greetings from the virus