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

Question

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

中的 divs

.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 是一个包含 owl 个操作示例的演示。

Demo 有转换。

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

Dynamically adding slide images inside slider

javascript

jquery

slider

owl-carousel