用AmazeUI作一个图片轮播，
如果采用官方的例子，是这样的

  <div data-am-widget="slider" class="am-slider am-slider-a1" data-am-slider='{&quot;directionNav&quot;: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的效果