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 :

final

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 !

:Hi,Did you get any solution that works good in both iphone and android?thanks!! — zina, Apr 01 '12 at 08:41
Nha i ended with a simple carrousel sadly. i am very disapointed with sencha and i am now back on native. — clenemt, Apr 02 '12 at 09:09

score 1 · Accepted Answer · answered May 12 '12 at 23:15

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.

:-)

answered May 12 '12 at 23:15

Digeridoopoo

423
1
5
17

i tried using padding at the time but could not make something work – clenemt Jan 17 '13 at 14:55

score 0 · Answer 2 · answered Jul 22 '13 at 04:13

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;'
            }
        ] 
    });

score 0 · Answer 3 · answered May 27 '14 at 13:15

0

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.

answered May 27 '14 at 13:15

Digeridoopoo

423
1
5
17

score 0 · Answer 4 · answered Nov 11 '11 at 08:58

0

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

answered Nov 11 '11 at 08:58

Swar

5,473
3
31
43

thank you but it is not the effect i want to obtain. It seems so simple but still could not find a solution. – clenemt Nov 11 '11 at 16:35

Multiple items sencha carousel

4 Answers4