Save space, show more – Multiview and Carousel widgets

While football players are restricted by the field area (watching the championship, eh?), web developers compete with each other in an even smaller battlefield called viewport. And the one wins who manages to occupy every inch of it wisely.

Still, you can always add one more layer to your application and choose content you’d like to show first. No doubt, Webix is always at hand with ready-made solutions for multiple-view layouts:

Accordion widget

Carousel widget

Multiview widget

All of them allow showing parts of content (views) in turn while offering different navigation patterns. We have already played the accordion a month ago and now I suggest to balance on the border line between Carousel and Multiview that look very similar at first sight.

With both widgets you can create a stack of views and show & hide them on demand. Still widget possibilities and the implied purpose are not the same.

Multiview and Carousel widgets in touch environment

Here you face the most crucial argument during choosing the right widget. Webix Carousel offers touch scrolling out of the box, which means that the views inside can be switched by swiping the finger on the device screen.

Multiview control comes without this possibility, but you can can attach custom logic to onSwipeX and onSwipeY events and do some API gymnastics to switch to the next cell.

Multiview and Carousel navigation

Webix Carousel comes with built-in navigation controls that lie within a Carousel container in a transparent layer above the active view. They include direction arrowsand round buttons linked to the views. You can disable them if not needed.

Multiview control, on the contrary, doesn’t have any built-in navigation and requires a separate control for switching between views. Tabbarand Segmented button are normally used for these means. Tabbar is a highly customizable control – you can embed active icons to it, hide and show its options, etc.

To cut a long story short..

Multiview is designed for displaying views different in purpose, e.g. a data list, form, or text content, in one Multiview;

Carousel is better for a homogeneous set of views like images as it looks more like a scrollable list with one item visible at a moment;

Multiview is designed for small quantity of views (3-5 of them, but nothing stops you from adding more) while Carousel can be as long as a snake;

Only Carousel implies non-stop circular navigation, while Multiview is finite;

Only Carousel views can be swiped by a finger on touch devices.

Still, practice may lead you to more profound experience than theory, so check the samples of Multiview and Carousel and use documentation (here and there) to overcome customization challenges. Good news – all the features are available in GPL edition!