Usage Example of Carousel

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
	<head>
		<link rel="stylesheet" href="../../../codebase/touchui.css" type="text/css" media="screen" charset="utf-8">
		<script src="../../../codebase/touchui.js" type="text/javascript" charset="utf-8"></script>
        <style>
		html,body{
            background-color:#ffffff;
        }
		.content{
			width:100%;height:100%;background-color:#565656;
		}
        </style>
		<title>Carousel view</title>
	</head>
 
	<body>
 
		<script type="text/javascript" charset="utf-8">
 
		dhx.ui({
			view:"window",
			body:{
				view:"carousel",
				id:"carousel",
				cols:[    
                                        { template:img, data:{src:"imgs/image001.jpg"} },
					{ template:img, data:{src:"imgs/image002.jpg"} },
					{ template:img, data:{src:"imgs/image003.jpg"} },
                                        { template:img, data:{src:"imgs/image004.jpg"} },
					{ template:img, data:{src:"imgs/image005.jpg"} },
					{ template:img, data:{src:"imgs/image006.jpg"} }
                                ],
                                panel:{align:"bottom"}
			},
			head:{
				view:"toolbar", type:"MainBar", data:[
					{type:"label", label: "Photobook", align:'left'}
				]
			},
			top:150, 
			left:150,
			width:480,
			height:340
		});
 
		function img(obj){
			return '<div class="content"><img src="'+obj.src+'" width="462px" height="275px" border="0" style="margin:8px 8px 15px 8px" ondragstart="return false"/></div>'
		}
 
		</script>
	</body>
</html>