src/examples/kitchensink/app/view/Carousel.js

   1 /**
   2  * Demonstrates how to use an Ext.Carousel in vertical and horizontal configurations
   3  */
   4 Ext.define('Kitchensink.view.Carousel', {
   5     extend: 'Ext.Container',
   6
   7     requires: [
   8         'Ext.carousel.Carousel'
   9     ],
  10
  11     config: {
  12         cls: 'cards',
  13         layout: {
  14             type: 'vbox',
  15             align: 'stretch'
  16         },
  17         defaults: {
  18             flex: 1
  19         },
  20         items: [{
  21             xtype: 'carousel',
  22             items: [{
  23                 html: '<p>Swipe left to show the next card&hellip;</p>',
  24                 cls: 'card'
  25             },
  26             {
  27                 html: '<p>You can also tap on either side of the indicators.</p>',
  28                 cls: 'card'
  29             },
  30             {
  31                 html: 'Card #3',
  32                 cls: 'card'
  33             }]
  34         }, {
  35             xtype: 'carousel',
  36             ui: 'light',
  37             direction: 'vertical',
  38             items: [{
  39                 html: '<p>Carousels can also be vertical <em>(swipe up)&hellip;</p>',
  40                 cls: 'card dark'
  41             },
  42             {
  43                 html: 'And can also use <code>ui:light</code>.',
  44                 cls: 'card dark'
  45             },
  46             {
  47                 html: 'Card #3',
  48                 cls: 'card dark'
  49             }]
  50         }]
  51     }
  52 });