How do i make carousel content dynamic?

Discontinued products DHTMLX Touch
#1

Hi All,
I need to make my carousel work like page list,I tried a lot but couldnt get it.I have noted my code as well.
Thanks in advance.

var sources = [
{id: 1, src: “assets/img/full-width/1.jpg”},
{id: 2, src: “assets/img/full-width/2.jpg”},
{id: 3, src: “assets/img/full-width/3.jpg”},
{id: 4, src: “assets/img/full-width/4.jpg”},
{id: 5, src: “assets/img/full-width/5.jpg”}, ]

     function custome_tpl(obj){
      
     var html =   '<div class="appWrapperP">';
     html +=   '<div class="appWrapperP">';
     html += '<div class="content">';
         html += '<img src="'+obj.src+'" width="462px" height="275px" border="0" style="margin:8px 8px 15px 8px" /></div>';
    html += '</div>';
    html += '</div>';
    html += '</div>';
     return html;    
     }

dhx.ready(function() {

    dhx.env.mobile = true;
    dhx.env.touch = true;
    dhx.ui.fullScreen();

    dhx.ui({
        view: "multiview",
        cols: [{

                view: "carousel",
                id: "carousel",
                //scrollTo('100);
                cols: [

                    {

                        data: sources,
                   datatype:"json",
		template: custome_tpl,
                      // for (i = 0; i < 5; i++){
                        //template: custome_tpl,
                       //},

                   //scroll:true,
                    }
                    
                ],
                panel: false,
            },
        ]
    });




});
#2

Hi,

“carousel” is layout-based component. So, data property can not be used for it. Try to use cols or rows and define cells as views, not data items. Here is the example:

var sources = [
{ id: 1, view: “template”, template: custome_tpl, data: { src: “assets/img/full-width/1.jpg” } },
{ id: 2, view: “template”, template: custome_tpl, data: { src: “assets/img/full-width/2.jpg” } },
{ id: 3, view: “template”, template: custome_tpl, data: { src: “assets/img/full-width/3.jpg” } },
{ id: 4, view: “template”, template: custome_tpl, data: { src: “assets/img/full-width/4.jpg” } },
{ id: 5, view: “template”, template: custome_tpl, data: { src: “assets/img/full-width/5.jpg” } }
];
…
view: “carousel”,
id: “carousel”,
cols: sources
…

#3

Thanks for reply Alexandra.
But since i need to get data from other server which is in json and need to arrange them like in carousel view. So any idea??
this is json data ;
[{“id”:“19”,“title”:“Title 1”,“image”:"assets/files/1.jpg},{“id”:“20”,“title”:“Title 2”,“image”:"assets/files/3.jpg}]
json data wont be limited.
var sources = testexample.com/json.php

view: “carousel”,
id: “carousel”,
cols: sources
How can make this in carousel view?any solutions?
Thanks.

#4

You should create carousel after data are loaded. Initially you can create an empty layout where you will add carousel then. Here is how it can be done:

[code]dhx.ui({
id: “layoutId”,
cols:[
{}
]
});

// loading data
dhx.ajax(“http://testexample.com/json.php”, function(text){
// converts data to an object
var data = dhx.DataDriver.json.toObject(text);
// carousel config
var config = [{
view:“carousel”,
id:“carousel”,
cols: data,
panel:{align:“bottom”}
}];
// layout creation
dhx.ui(config,$$(“layoutId”));
});[/code]

#5

Thanks Alexandra