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",
container:"mydiv",
...config options goes here..
})
//or, in case of jQuery
$("#mydiv").webix_carousel({
...config options goes here..
});
Where to start
Methods
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 (allows behaviour customizations) |
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 hash of 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 top parent view |
hasEvent | checks whether the component has the specified event |
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 |
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 blocking events 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 |
onDestruct | occurs when component destroyed |
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 | when some webix view has been touched |
onViewResize | view size was changed by resizer |
Properties
animate | defines or disables view change animation. |
borderless | used to hide the component borders |
cols | array of views objects arranged horizontally |
container | an html container (or its id) where the component needs initializing |
css | the name of a css class that will be applied to the view container |
disabled | indicates whether an item is enabled or not |
gravity | sets the view gravity (1 by default) |
height | sets the height of the component |
hidden | defines whether the view will be hidden initially |
id | the component ID |
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 | speed of scrolling ('300ms' by default) |
type | defines the layout borders |
width | sets the width of the component |
Other
$getSize | returns the current size of the component |
$height | current height of the view |
$scope | scope for resolving event and method names |
$setSize | sets the component size |
$skin | method, which will be called when skin defined |
$view | reference to top html element of the view |
$width | current width of the view |
config | all options from initial component configuration |
name | indicates the name of the component (a read-only property) |
Back to top