如果采用官方的例子，是这样的
<div data-am-widget="slider" class="am-slider am-slider-a1" data-am-slider='{"directionNav":false}' >
<ul class="am-slides">
<li>
<img src="http://s.amazeui.org/media/i/demos/bing-1.jpg">
</li>
<li>
<img src="http://s.amazeui.org/media/i/demos/bing-2.jpg">
</li>
<li>
<img src="http://s.amazeui.org/media/i/demos/bing-3.jpg">
</li>
<li>
<img src="http://s.amazeui.org/media/i/demos/bing-4.jpg">
</li>
</ul>
</div>
运行没有问题
但是这些图片地址要从数据库读取，因此li的图片连接要循环在js里拼接得到
var slidehtml = '';
var slidepictures = site.SlidePicture.split('|');
for (var i = 0; i < slidepictures.length; i++) {
slidehtml += '<li><img class="am-img-responsive" src="../assets/banner' + slidepictures[i] + '"></li>';
}
$("#doc-ipt-slide").html(slidehtml);
运行后，渲染得到的DOM结构和官网提供的一模一样
而官网的例子渲染得到的DOM结构如下
官网好像把自己的html代码又渲染了一遍
请问应该怎么做才能用AmzaeUI实现动态实现slider的效果
