Carousel

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.


Full code of the example in the picture

Initialization

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", 
...})

Parameters

In constructor you can specify the following parameters:

  • panel - the panel showing the total amount of carousel's items and which one of them is selected.
    You can find it in the picture above: it looks like
    • align - (left, right, top, bottom) specifies the position of the panel
    • size - (integer) specifies the size of the panel (defines panel's width if align is set to left or rigth or panel's height - if align is set to top or bottom)
      The default value - 16 px.

Please note, carousel is a derived class, i.e. it inherits all the features of the base classes (carousel → layoutview).

dhx.ui({
	view:"carousel",
	id:"carousel",
	rows:[    
              { template:"one"},
	      { template:"two" },
              { template:"three" },
        ],
        panel:{	align:"top"}
});

The types of scrolling: horizontal and vertical

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
 }
}

Related how-tos