---
title: "Carousel in Sencha Touch"  
description: "In this blog, I’m explaining how to use the carousel component in sencha touch."  
author: "Sumit Kesarwani"  
published: 2013-06-10  
updated: 2019-09-07  
canonical: https://www.mindstick.com/articles/1320/carousel-in-sencha-touch  
category: "sencha touch"  
tags: ["sencha touch"]  
reading_time: 2 minutes  

---

# Carousel in Sencha Touch

In this blog, I’m explaining how to use the [carousel](https://answers.mindstick.com/qa/106028/what-are-the-benefits-of-using-facebook-carousel-ads-for-visual-storytelling) [component](https://www.mindstick.com/articles/12262/learn-how-to-make-a-component-in-magento-2) in [sencha touch](https://www.mindstick.com/blog/619/changing-sencha-touch-app-theme).\

Carousels, like tabs, are a great way to allow the user to swipe through [multiple](https://www.mindstick.com/blog/12797/iowa-is-expected-to-see-heavy-growth-in-multiple-sectors) 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](https://www.mindstick.com/blog/63525/get-the-most-out-of-maths-with-these-8-simple-tricks) 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](https://www.mindstick.com/interview/12771/what-is-the-importance-of-default-resources), the [direction](https://yourviews.mindstick.com/story/5034/10-animals-with-the-best-sense-of-direction) of carousel is horizontal, if you want to change the direction then you change through direction configuration.

##### Output

![Carousel in Sencha Touch](https://www.mindstick.com/mindstickarticle/c3a4bbdb-2406-47f5-b643-b28227d01a96/images/07c8b884-839b-476a-8387-75021f246a3b.png)

If you swipe right

![Carousel in Sencha Touch](https://www.mindstick.com/mindstickarticle/c3a4bbdb-2406-47f5-b643-b28227d01a96/images/9a22dc5b-c17b-463a-b3f5-b09d5b4f8f94.png)

---

Original Source: https://www.mindstick.com/articles/1320/carousel-in-sencha-touch

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.