ui.carousel
A container control that provides continuous, circular navigation through a set of pictorial content blocks. One block is visible at a time.
The control supports any content inside of it. The content blocks can be arranged vertically or horizontally, supplemented or not with the navigation control panel. Check carousel documentation for more detailed description.
Constructor
var carousel = webix.ui({
view:"carousel",
id:"carousel",
width:464,
height:275,
cols:[
{ css:{"background-color":"#ffc4c4"}, template:"view1" },
{ css:{"background-color":"#ffffb1"}, template:"view2" },
{ css:{"background-color":"#c4ffc4"}, template:"view3" }
]
});
Where to start
Methods
| addView | adds a new view to a carousel or moves an existing one |
| adjust | adjusts the component to the size of the parent HTML container |
| adjustScroll | adjusts scrolling direction to screen mode (vertical or horizontal) |
| attachEvent | attaches the handler to an inner event of the component |
| bind | binds components |
| blockEvent | temporarily blocks triggering of ALL events of the calling object |
| callEvent | calls an inner event |
| define | redefines a single configuration property (or a object with properties) |
| destructor | destructs the calling object |
| detachEvent | detaches a handler from an event (which was attached before by the attachEvent method) |
| disable | disables the calling view (makes it dimmed and unclickable) |
| enable | enables the calling view that was disabled by the 'disable' method |
| getActiveId | gets the id of the current selected item |
| getActiveIndex | gets the index of the current active item |
| getChildViews | returns child views of the calling component |
| getFormView | returns master form for the input |
| getLayout | gets layout object with carousel views |
| getNode | returns the main HTML container for the calling object |
| getParentView | returns the parent view of the component |
| getTopParentView | returns the top parent view |
| hasEvent | checks whether the component has the specified event handler |
| hide | hides the view |
| isEnabled | checks whether the view is enabled |
| isVisible | checks whether the view is visible |
| mapEvent | routes events from one object to another |
| queryView | returns inner element/elements of a widget that correspond(s) to the defined parameters |
| removeView | removes the specified view of a carousel |
| resize | adjusts the view to a new size |
| scrollTo | scrolls the carousel and scrollview container to a certain position |
| setActive | selects the item with the specified id |
| setActiveIndex | selects the item with the specified index |
| show | makes the component visible |
| showNext | shows the next item of the carousel |
| showPrev | shows the previous item of the carousel |
| unbind | breaks "bind" link |
| unblockEvent | cancels events blocking that was enabled by the 'blockEvent' command |
Events
| onAfterScroll | occurs when some webix view has been scrolled |
| onBindRequest | fires when the component is ready to receive data from the master component |
| onBlur | fires when focus is moved out of the view |
| onDestruct | occurs when component destroyed |
| onEnter | fires when the Enter key has been pressed |
| onFocus | fires when a view gets focus |
| onKeyPress | occurs when keyboard key is pressed for the control in focus |
| onLongTouch | fires on holding finger in some position for a certain period of time |
| onShow | fires when a new view is shown in carousel |
| onSwipeX | occurs on a horizontal swipe movement |
| onSwipeY | occurs on a vertical swipe movement |
| onTimedKeyPress | fires after typing has been finished in the field |
| onTouchEnd | occurs when the touch event is ended |
| onTouchMove | occurs during touch movement |
| onTouchStart | fires when some webix view has been touched |
| onViewResize | fires when the size of a view has been changed by resizer |
| onViewShow | fires when any hidden view is shown |
Properties
| animate | defines the type of animation, with which the view is shown, if it is a Multiview cell |
| borderless | used to hide the component borders |
| cols | array of views objects arranged horizontally |
| container | an HTML container (or its ID) where the component should be initialized |
| css | the name of the CSS class or the object with styles that will be applied to the view container |
| disabled | indicates whether an item is enabled |
| gravity | sets the view gravity |
| height | sets the height of the component |
| hidden | defines whether the view will be hidden initially |
| id | the ID of a widget |
| keyPressTimeout | a delay between the key press and the action |
| maxHeight | sets the maximum height for the view |
| maxWidth | sets the maximum width for the view |
| minHeight | sets the minimal height for the view |
| minWidth | sets the minimal width for the view |
| navigation | defines navigation parameters |
| on | allows attaching custom handlers to inner events of the component |
| rows | array of views arranged vertically |
| scrollSpeed | the speed of scrolling |
| type | defines the layout borders |
| width | sets the width of a widget |
Other
| $getSize | returns the current size of the component |
| $height | the current height of the view |
| $scope | scope for resolving event and method names |
| $setNode | defines HTML element for the component |
| $setSize | sets the component size |
| $skin | the method which will be called when skin is defined |
| $view | reference to the top HTML element of the view |
| $width | the current width of the view |
| config | all options from the initial component configuration |
| name | indicates the name of the component (a read-only property) |
Back to top