Ui-related carousel is designed to present Webix components in one view with the ability to switch between them by clicking on the dedicated buttons or sliding (on touch devices).
Carousel items are arranged into either rows to scroll through them vertically or in cols to scroll horizontally. Each row/column includes Webix component, e.g:
webix.ui({
view:"carousel",
id:"carousel",
cols:[
{ view:"template" },
{ view:"chart" },
{ view:"datatable" },
{ rows:[...]} //layout
]
});
Normally, component configuration is stored separately while cols/rows contain an array of corresponding variables. It makes code clear and easy to read.
Carousel comes equipped with a navigation panel that contains:
You can either click buttons or items to get to the needed view. On touch devices views are switched by swipe movements.
Related sample: Navigation types
Navigation area is controlled via navigation object property of the carousel component. From there you can:
view:"carousel",
cols:[...],
navigation:{
type: "side",
items:false,
//buttons:false
}
Any Webix component can be used to navigate through the carousel by using its API.
For instance, you can use one-row dataview with thumbnails of carousel views.
Related sample: List navigation
In layout carousel and the component used for navigation are stored in different rows or cols:
rows:[
{view: "carousel",
id:"carousel",
cols: []
},
{view: "dataview",
id: "imageList",
yCount: 1, //one row
select: true, //item selection enabled
scroll: false, //non-scrollable
data: [...]
}
]
Switching is enabled by catching carousel onShow and dataview onItemClick events:
// when dataview item is clicked, the needed view is shown
$$("imageList").attachEvent("onItemClick",function(id){
$$(id).show();
});
//when carousel item is shown, its thumbnail in dataview is selected
$$("carousel").attachEvent("onShow",function(id){
$$("imageList").select(id);
});
Learn more about how to show and hide Webix components and study selection pattern of data components.
The default scrolling speed of the carousel is 300ms. To change it use the following:
webix.ui({
view:"carousel",
scrollSpeed: "500ms"
});
However, in case of significantly slower scrolling speed smoothness may degrade.
1 . You can programmatically navigate through the carousel with the help of the following switching functions: - showPrev() - takes to the previous view; - showNext() - takes to the next view.
These functions can be attached to custom buttons or any on-page and application events:
{ view:"button", value:"Previous View", click:function(){ $$('carousel').showPrev(); }
2 . With touch-based devices initial scrolling pattern can be changed depending on the screen orientation. Scrolling is adjusted by the dedicated method:
$$("carousel").adjustScroll();
3 . Active carousel item is a view that is currently shown. Carousel views can be treated either by their IDs or by their position in the cols/rows array (zero-based numbering).
4 . The same way you can get the currently shown (active) item:
$$("carousel").getActiveIndex();