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

Dynamically adding slide images inside slider

本文关键字：添加 幻灯片 图像 动态      更新时间：2023-09-26

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

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

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

试试这个：

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

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

演示瞬变。

相关文章：