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
If you swipe right
Leave a Comment