Clear Up
SharpKit Reference

Carousel Class

Namespace: Ext.carousel

Base Types

System.Object

Constructors

Properties

Name Description
ActiveIndex Returns the index of the currently active card. @return {Number} The index of the currently active card.
alternateClassName
extend @class Ext.carousel.Carousel @extends Ext.Panel * Carousels, like [tabs](#!/guide/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. Here's how to set up a simple horizontal Carousel: @example Ext.create('Ext.Carousel', { fullscreen: true, defaults: { styleHtmlContent: true }, items: [ { html : 'Item 1', style: 'background-color: #5E99CC' }, { html : 'Item 2', style: 'background-color: #759E60' }, { html : 'Item 3' } ] }); We can also make Carousels orient themselves vertically: * @example preview Ext.create('Ext.Carousel', { fullscreen: true, direction: 'vertical', defaults: { styleHtmlContent: true }, items: [ { html : 'Item 1', style: 'background-color: #759E60' }, { html : 'Item 2', style: 'background-color: #5E99CC' } ] }); ### Common Configurations * {@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 * ## Further Reading For more information about Carousels see the [Carousel guide](#!/guide/carousel).
xtype @class Ext.carousel.Carousel @extends Ext.Panel * Carousels, like [tabs](#!/guide/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. Here's how to set up a simple horizontal Carousel: @example Ext.create('Ext.Carousel', { fullscreen: true, defaults: { styleHtmlContent: true }, items: [ { html : 'Item 1', style: 'background-color: #5E99CC' }, { html : 'Item 2', style: 'background-color: #759E60' }, { html : 'Item 3' } ] }); We can also make Carousels orient themselves vertically: * @example preview Ext.create('Ext.Carousel', { fullscreen: true, direction: 'vertical', defaults: { styleHtmlContent: true }, items: [ { html : 'Item 1', style: 'background-color: #759E60' }, { html : 'Item 2', style: 'background-color: #5E99CC' } ] }); ### Common Configurations * {@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 * ## Further Reading For more information about Carousels see the [Carousel guide](#!/guide/carousel).

Methods

Name Description
applyIndicator(object)
destroy()
getActiveIndex() Returns the index of the currently active card. @return {Number} The index of the currently active card.
getCardIndexOffset(object, object, object) Returns the difference between the index of the active card and the passed card. @private
getCardOffset(object, object, object) Returns the amount of pixels from the current drag to a card. @private
getCardTransform(object)
initialize()
isCardInRange(object) Returns true if the passed card is within 2 cards from the active card. @private
isIndexInRange(object, object)
next() Switches to the next card @return {Ext.carousel.Carousel} this
onActiveItemChange(object, object)
onAdd(object, object)
onDrag(object, object)
onDragEnd(object, object)
onDragStart(object)
onPainted()
onRemove(object, object)
previous() Switches to the previous card @return {Ext.carousel.Carousel} this
updateCardPosition(object, object, object)
updateCardSize()
updateDirection(object)
updateIndicator(object)
updateItemCls(object, object)
© Copyright 2005-2011 SharpKit. All rights reserved.