javascript - owl-carousel 使用 Javascript 动态添加图片

Question

我正在尝试使用 java 脚本将图像添加到“.owl-carousel”中。

当我用 static 尝试它时，它的工作

    <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 时。

谁能帮帮我

提前致谢:)

Answer 1

使用 .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);