Multiple items sencha carousel

Question

Hi,

I could not manage to get where i want with my carousel. This is for an iPhone / iPad web App.

Basically i want to show part of my previous and next item card inside the carousel. Because a picture is worth a thousand words here is the final view i want to obtain :

Same as in the appStore preview screenshots of an app.

I have tried many things but nothing have work so far.

Any tips would be great :) Thank you !

Answer 1

This would definitely be possible, if you were to 'push' the carousel pages 3 onto one page, with spacing (margin or padding) up high to create the effect.

At this stage there are no public examples of multi item (on one page) carousels, but it is possible and I am currently working on a multi item carousel. I added margin and padding to achieve 15 thumbnails on 1 page.

:-)

Answer 2

you can use set itemLength property of Carousel,

Ext.create('Ext.Carousel', {
        fullscreen: true,
         itemLength: 250, // **you can change value as you want**
        defaults: {
            styleHtmlContent: true
        }, 
        items: [
            {
                html: 'item1',
                style: 'background-color:red;'
            }, {
                html: 'item2',
                style: 'background-color:white;'
            }, {
                html: 'item3',
                style: 'background-color:gray;'
            }, {
                html: 'item4',
                style: 'background-color:blue;'
            }, {
                html: 'item5',
                style: 'background-color:yellow;'
            }
        ] 
    }); 

Answer 3

See this blog post where they explain it:

http://www.sencha.com/blog/using-the-leap-motion-controller-with-sencha-touch/

They used this in their code:

itemLength: browserWidth * 0.8.

Answer 4

There is a coverflow plugin available not exactly same but similar. Check the demo here:

http://twomonkeys.com.ar/lab/cover/

You can get the source code here:

https://github.com/elmasse/Ext.ux.Cover