Carousel is a component that's used for presenting different views which can be changed by means of scrolling (horizontal or vertical). It's similar to pagelist but pagelist has some additional possibilities. Ui-related carousel inherits from layout.
To init the component you need to perform a simple procedure - call initialization code.
Initialization code or an object constructor lets you create an object by using common declaration.
dhx.ui ({view:"carousel", ...})
In constructor you can specify the following parameters:
Please note, carousel is a derived class, i.e. it inherits all the features of the base classes (carousel → layout → view).
dhx.ui({ view:"carousel", id:"carousel", rows:[ { template:"one"}, { template:"two" }, { template:"three" }, ], panel:{ align:"top"} });
Before you know how to set the desired type of scrolling, let's remember the parameters which carousel inherits from layout - rows (specifies a list of vertical views) and cols (specifies a list of horizontal views).
Exactly these parameters let us to define the needed type. So, if you'd like to set horizontal scrolling you have to use cols parameter. If you need vertical scrolling you have to use the rows parameter.
Horizontal | Vertical |
---|---|
![]() | ![]() |
{view:"carousel", id:"carousel", cols:[ { template:"<img src='spring.jpg'/>" }, { template:"<img src='summer.jpg'/>" }, { template:"<img src='autumn.jpg'/>" }, { template:"<img src='winter.jpg'/>" } ], panel:{ align:"bottom", size:14 } } | {view:"carousel", id:"carousel", rows:[ { template:"<img src='spring.jpg'/>" }, { template:"<img src='summer.jpg'/>" }, { template:"<img src='autumn.jpg'/>" }, { template:"<img src='winter.jpg'/>" } ], panel:{ align:"bottom", size:14 } } |
To use ui functionality, touchui.css and touchui.js files must be included.