owl-carousel使用Java Script动态添加图像

时间:2015-08-17 11:00:49

标签: javascript jquery html css owl-carousel

我正在尝试将图像添加到" .owl-carousel"通过使用java脚本。

当我通过静态尝试它时,它的工作

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

我想在动态中制作img。所以我试过

 var content = '<li class="item"><img src="'+ imageListItems.image_path; +'" ></li>';
   owl.data('owlCarousel').addItem(content);

当我检查li标签时没有附加到ul。

任何人都可以帮助我

提前致谢:)

1 个答案:

答案 0 :(得分:0)

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