/**
 * @class Ext.carousel.Carousel
 * @extend Ext.Container
 * @alternateClassName Ext.Carousel
 * @xtype carousel
 *
 * 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 packages=[reactor]
 *     import React, { Component } from 'react'
 *     import { Carousel, Container } from '@extjs/ext-react';
 *
 *     export default class MyExample extends Component {
 *         render() {
 *             return (
 *                 <Container layout="fit">
 *                     <Carousel>
 *                         <Container>
 *                             <div>Slide 1!</div>
 *                         </Container>
 *                         <Container>
 *                             <div>Slide 2!</div>
 *                         </Container>
 *                         <Container>
 *                             <div>Slide 3!</div>
 *                         </Container>
 *                     </Carousel>
 *                 </Container>
 *             )
 *         }
 *     }
 *
 * ### Common Props
 * * {@link #ui} defines the style of the carousel
 * * {@link #direction} defines the direction of the carousel
 * * {@link #indicator} defines if the indicator show be shown
 *
 * ### Useful Methods
 * * {@link #next} moves to the next card
 * * {@link #previous} moves to the previous card
 * * {@link #setActiveItem} moves to the passed card
 */
 
/**
 * @cfg {String} [direction='horizontal']
 * The direction of the Carousel, either 'horizontal' or 'vertical'.
 * @accessor
 */
 
/**
 * @cfg draggable
 * @hide
 */
 
/**
 * @cfg {Boolean/Ext.carousel.Indicator} [indicator=true]
 * Provides an indicator while toggling between child items to let the user
 * know where they are in the card stack.
 * @accessor
 */
 
/**
 * @cfg {String} [ui='dark']
 * Style options for Carousel. Default is 'dark'. 'light' is also available.
 * @accessor
 */
 
/**
 * @method getActiveIndex
 * Returns the index of the currently active card.
 * @return {Number} The index of the currently active card.
 */
 
/**
 * @method next
 * Switches to the next card.
 * @return {Ext.carousel.Carousel} this
 * @chainable
 */
 
/**
 * @method previous
 * Switches to the previous card.
 * @return {Ext.carousel.Carousel} this
 * @chainable
 */