Javascript 在滑块内动态添加幻灯片图像

我正在尝试在名为owl slider的滑块中动态添加图像。 问题是我想清除

.owl-wrapper

div，然后单击添加新项目。 原始代码是

 <div id="owl-demo" class="owl-carousel owl-theme">
                <div class="item">
                    <img src="../img/car1.jpg" alt="The Last of us">
                </div>
                <div class="item">
                    <img src="../img/car2.jpg" alt="The Last of us">
                </div>
                <div class="item">
                    <img src="../img/car3.jpg" alt="The Last of us">
                </div>
                <div class="item">
                    <img src="../img/car4.jpg" alt="The Last of us">
                </div>
            </div>

现在我做到了

      $('.singleNewsItem').click(function () {

            $('#owl-demo').append('<div class="item"><img src="../img/trac1.jpg"></div>');

            });
    });

$（'.singleNewsItem'）。单击（函数（）{
$（“#owl demo”）.append（“”）；
});
});

不知何故，它将图像添加到主滑块之外。 请帮忙。 谢谢。

试试这个：

// make sure it's initialized:
// $("#owl-demo").owlCarousel();

$('.singleNewsItem').click(function () {
    // clean the container:
    $('#owl-demo').text('');
    var img = '<div class="item"><img src="../img/trac1.jpg"></div>';
    $("#owl-demo").data('owlCarousel').addItem(img);
});

//确保它已初始化：
//$（“#owl demo”）.owlCarousel（）；
$（'.singleNewsItem'）。单击（函数（）{
//清洁容器：
$（'#owl demo'）.text（''）；
var img=“”；
$（“#owl demo”）.data（'owlCarousel'）.addItem（img）；
});

是一个带有owl操作示例的演示

---

与运输有关。

哇，谢谢，伙计，它起作用了。只是一个小问题。如何在添加此幻灯片之前清除所有幻灯片？我的意思是，如果我只需要这一个，你能帮我吗？@MarcadrejiaCarrini，你可以这样做：。最新答案