Home > DeveloperSection > Articles > Carousel in Sencha Touch

Carousel in Sencha Touch


Sencha Touch Sencha Touch 
Ratings:
0 Comment(s)
 1813  View(s)
Rate this:

Carousel in Sencha Touch

In this blog, I’m explaining how to use the carousel component in sencha touch.

Carousels, like tabs, are a great way to allow the user to swipe through multiple full-screen pages. A Carousel shows only one of its pages at a time but allows you to swipe through with your finger.

Carousels can be oriented either horizontally or vertically and are easy to configure, they just work like any other Container.

Example

In this example, I’m creating a simple horizontal carousel.

Ext.define('MyApp.view.MyCarousel', {

    extend: 'Ext.carousel.Carousel',

 

    config: {

        fullscreen: true,

        items: [

            {

                html: 'Item 1',

                style: 'background-color: #759E60'

            },

            {

                html: 'Item 2',

                style: 'background-color: #5E99CC'

            },

            {

                html: 'Item 3',

                style: 'background-color: #ffb600'

            },

            {

                html: 'Item 4',

                style: 'background-color: #ff0'

            }

        ]

    }

});

 

By default, the direction of carousel is horizontal, if you want to change the direction then you change through direction configuration.

Output

Carousel in Sencha Touch

If you swipe right

Carousel in Sencha Touch

 

 

 


Don't want to miss updates? Please click the below button!

Follow MindStick