Carousel indicator - feature request

[pentool]

I'd like to have a feature for the carousel's indicator. Currently the indicator is hovering over the carousel. Which means, if I put items in the carousel using a dataview, list, (think of the AppStore on the iPad), I'd like the indicators to be UNDER the items that are in the carousel as opposed to overlay them.

The same is true for full size carouse images. The indicators will hover over the image.

I'd like an option where the indicators will automatically shrink the carousel's content area and so they can be positioned at the bottom with, say, a single color row, so the indicators are clearly visible.

Currently I'm using a twisted workaround for this. On resize and painted events, I measure the height of the carousel, then subtract from it the height of the titlebar, then measure and subtract the height of the indicators, and that will be the actual height of the carousel. Then I have to use this number to lay out the contents so that the indicators will not be positioned over the contents and will have clear visibility. To do all this is an overkill.

Unless, of course, someone can suggest a better way of going about this. I tried docking the indicator at the bottom, thinking this would reduce the content height of the carousel, but had no effect for some reason.

[mitchellsimoens]

Why not just show and hide the indicator:

new Ext.carousel.Carousel({
    fullscreen : true,
    items      : [
        {
            xtype  : 'toolbar',
            docked : 'top',
            items  : [
                {
                    text    : 'Hide Indicator',
                    handler : function (button) {
                        var carousel  = button.up('carousel'),
                            indicator = carousel.getIndicator();

                        indicator.hide();
                    }
                },
                {
                    text    : 'Show Indicator',
                    handler : function (button) {
                        var carousel  = button.up('carousel'),
                            indicator = carousel.getIndicator();

                        indicator.show();
                    }
                }
            ]
        },
        {
            html : 'One'
        },
        {
            html : 'Two'
        }
    ]
});

[pentool]

Well, thanks, but the issue is not showing or hiding. I want the indicators to be visible but NOT floating over the content.

As it is currently, they are ALWAYS floating over the content. I don't want that. I want them to be ALWAYS visible and positioned BELOW the content.

And you have to do some measuring left and right to make that work. A simple config option would be so much better.

[mitchellsimoens]

So the indicators will be off screen if you have an image that is 100% the height/width? IMO that isn't very user friendly

[pentool]

Ok, lemme illustrate with some screenshots. See the indicators (circled in red) are actually BELOW the content and not OVER it? In case of the last screenshot they are both UNDER and ABOVE the content. They are not hovering OVER the content. That's what I'm talking about. A config choice where you can place the indicators either BELOW (as on the screenshots) or OVER the content - as currently is with the Ext.Carousel.

indicators1.jpg


indicators2.jpg


indicators3.jpg

[jerome76]

There isn't a default config you can do to get this result.

You can try creating your own carousel with a inner container to hold all the cards that is fit to a smaller size and having its indicators floating on the top, bottom, or both.

Best to start by looking at the source for the carousel.
carousel.js
carousel.scss

If you want to just use docked toolbars with naviation buttons on the left and right side you can do that, but the idicator would still float on the bottom of the carousel content.