owl-轮播使用Java脚本动态添加图片
owl-carousel add image dynamically by using Java Script
我正在尝试使用 java 脚本将图像添加到“.owl-carousel”。
当我通过静态尝试时,它起作用了
<div id="demo">
<div class="container">
<div class="row">
<div class="span12">
<ul id="owl-demo" class="owl-carousel">
<li class="item"><img src="puzzlepictures/img02.jpg" id="2"></li>
<li class="item"><img src="puzzlepictures/img03.jpg" id="3"></li>
<li class="item"><img src="puzzlepictures/img04.jpg" id="4"></li>
</ul>
</div>
</div>
</div>
</div>
我想让li中的img动态化。所以我尝试了
var content = '<li class="item"><img src="'+ imageListItems.image_path; +'" ></li>';
owl.data('owlCarousel').addItem(content);
当我检查 li 标签没有附加到 ul 时。
谁能帮帮我
提前致谢:)
使用.append()
函数怎么样?
像这样;
JQUERY
var content = '<li class="item"><img src="puzzlepictures/img02.jpg" id="2"></li><li class="item"><img src="puzzlepictures/img02.jpg" id="2"></li><li class="item"><img src="puzzlepictures/img02.jpg" id="2"></li>';
var owl = $("#owl-demo");
owl.append(content);
我正在尝试使用 java 脚本将图像添加到“.owl-carousel”。
当我通过静态尝试时,它起作用了
<div id="demo">
<div class="container">
<div class="row">
<div class="span12">
<ul id="owl-demo" class="owl-carousel">
<li class="item"><img src="puzzlepictures/img02.jpg" id="2"></li>
<li class="item"><img src="puzzlepictures/img03.jpg" id="3"></li>
<li class="item"><img src="puzzlepictures/img04.jpg" id="4"></li>
</ul>
</div>
</div>
</div>
</div>
我想让li中的img动态化。所以我尝试了
var content = '<li class="item"><img src="'+ imageListItems.image_path; +'" ></li>';
owl.data('owlCarousel').addItem(content);
当我检查 li 标签没有附加到 ul 时。
谁能帮帮我
提前致谢:)
使用.append()
函数怎么样?
像这样;
JQUERY
var content = '<li class="item"><img src="puzzlepictures/img02.jpg" id="2"></li><li class="item"><img src="puzzlepictures/img02.jpg" id="2"></li><li class="item"><img src="puzzlepictures/img02.jpg" id="2"></li>';
var owl = $("#owl-demo");
owl.append(content);