Question

对于我目前的项目，我试图动态添加多个滑块/旋转木马（我使用猫头鹰旋转木马）：

首先我初始化轮播（包括必要的js / css之后）：

<div class="search-carousel owl-carousel carousel-home">
   <div class="item"><img class="lazyOwl" data-src="assets/img/sample/place1.jpg"></div>
   <div class="item"><img class="lazyOwl" data-src="assets/img/sample/place2.jpg"></div>
</div>

现在我在页面加载时加载多个这些^并在ajax请求后动态加载，因为我的jQuery看起来像这样：

/* OWL CAROUSEL */
    var owlhome = $(".search-carousel");
    owlhome.owlCarousel({
        items : 4,
        lazyLoad : true,
        navigation : false
    });
    $(".arr-left").click(function(){
        owlhome.trigger('owl.prev');
    });
    $(".arr-right").click(function(){
        owlhome.trigger('owl.next');
    });

如何在动态添加更多滑块的情况下使插件正常工作？ 我创建了一个jsFiddle 示例来展示插件如何对动态添加的新轮播进行操作：

https://jsfiddle.net/kz3c6L64/

提前致谢！

Answer 1

通过分配foo.innerHTML，您正在销毁猫头鹰代码在owlCarousel调用中附加到的所有DOM元素。

该文档包含有关添加和删除项目的方法的信息。这似乎是一种更好的方式来做你想做的事：http://owlgraphic.com/owlcarousel/demos/manipulations.html

Answer 2

一个简单的方法是创建一个既可以添加新轮播又可以绑定它的函数，例如

var carouselTemplate = '<div class="block"><a class="arr-left">LT</a> <a class="arr-right">RT</a> <div class="owl-carousel"><div><img src="http://i.imgur.com/Ud2JynQ.jpg" width:="100" height="50"/></div><div><img src="http://i.imgur.com/Ud2JynQ.jpg" width:="70" height="50"/></div><div><img src="http://i.imgur.com/Ud2JynQ.jpg" width:="100" height="50"/></div></div></div>';

function createAndBindCarousel($element) {
    // Carousel template
    var $owlCarousel = $(carouselTemplate);

    // Insert carousel into element
    $element.append($owlCarousel);

    // Bind carousel
    $owlCarousel.owlCarousel({
        items : 4,
        lazyLoad : true,
        navigation : false
    });

    // Left arrow
    $owlCarousel.find(".arr-left").click(function(){
      $owlCarousel.trigger('owl.prev');
    });

    // Right arrow
    $owlCarousel.find(".arr-right").click(function(){
      $owlCarousel.trigger('owl.next');
    });
}

// Add a new carousel to #carousels
createAndBindCarousel($("#carousels"));

Answer 3

根据示例here，您需要按照以下格式化函数调用：

owlcarousel.data('owlCarousel').addItem('<div>my html markup</div>');

Updated fiddle

如果您要创建其他轮播，只需在将其HTML添加到DOM后初始化轮播对象。

$('.class-that-match-your-carousel-attribute').owlCarousel();

当您使用上述内容时，您必须确保该类也被分配给您要添加到DOM的HTML元素。

Fiddle where carousel is added

动态创建多个元素（滑块/轮播）

3 个答案: