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

Question

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

中的div

.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>');

            });
    });

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

Answer 1

试试这个：

// 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);
});

There是一个带有猫头鹰操作示例的演示。

带有过渡的

Demo。