CODEWITHSUNDEEP
javascriptsencha-touchextjscarouselsencha-touch-2
clenemt
clenemt

Reputation: 793

Multiple items sencha carousel

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 !

Upvotes: 1

Views: 1303

Answers (4)

Digeridoopoo
Digeridoopoo

Reputation: 423

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.

Upvotes: 0

Tejas
Tejas

Reputation: 928

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

Upvotes: 0

Digeridoopoo
Digeridoopoo

Reputation: 423

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.

:-)

Upvotes: 1

Swar
Swar

Reputation: 5503

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

Upvotes: 0

Related Questions