动态生成的AmazeUI轮播图不起作用

yaotomo 2018-08-20 08:38:10
用AmazeUI作一个图片轮播,
如果采用官方的例子,是这样的

<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的效果
...全文
503 6 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
_竹 2020-02-21
  • 打赏
  • 举报
回复
大佬怎么解决的,我也是这个问题,不知道怎么重新渲染
like thissssssssss 2019-01-09
  • 打赏
  • 举报
回复
大佬,求你修改控制器的步骤
yaotomo 2018-08-22
  • 打赏
  • 举报
回复
引用 3 楼 lqlqlq007 的回复:
我没用过AmazeUI ,你找下插件的渲染开关,猜测你当前是默认打开的,即页面load完成后自动渲染,找到开关后关掉开关,并在$("#doc-ipt-slide").html(slidehtml); 这句后面手动执行渲染。


谢谢老师,已经可以了
讨厌走开啦 2018-08-20
  • 打赏
  • 举报
回复
必须等当前页面的所有图片都获取后才能开始用插件做轮播图渲染,当前绝大多数的轮播图插件都会改变对应图片container的dom结构。
讨厌走开啦 2018-08-20
  • 打赏
  • 举报
回复
我没用过AmazeUI ,你找下插件的渲染开关,猜测你当前是默认打开的,即页面load完成后自动渲染,找到开关后关掉开关,并在$("#doc-ipt-slide").html(slidehtml); 这句后面手动执行渲染。
yaotomo 2018-08-20
  • 打赏
  • 举报
回复
引用 1 楼 lqlqlq007 的回复:
必须等当前页面的所有图片都获取后才能开始用插件做轮播图渲染,当前绝大多数的轮播图插件都会改变对应图片container的dom结构。


谢谢。那我应该怎么做才能在所有图片加载后再使用插件呢

87,997

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧