如何在ajax呼叫后重新初始化Owl Carousel？

Question

我试图在ajax成功通话后重新初始化猫头鹰旋转木马。 ajax调用将更改数据但视图应保持不变。我遇到的问题是视图（轮播结构）不会重新初始化。页面加载时一切都很好。

我使用的是1.3.3版本

$(document).ready(function() {
 $(".owl-carousel").owlCarousel({
   items : 3
 });
});

Ajax调用

$.ajax({
    type: 'get',
    url: '/public/index',
    dataType: 'script',
    data: data_send,
      success: function(data) {
       $(".owl-carousel").owlCarousel({
         items: 3
       });
      }
   });
}

我错过了一些我需要做的事情吗？我在github页面上看过这个问题并尝试了这些建议，但无济于事。

编辑

根据给出的建议，我创建了这两个函数

function owlCarousel() {
  var owl = $(".owl-carousel"); 
  //init carousel
  owl.owlCarousel();
    owl.data('owlCarousel').reinit({
     items : 3
    });
}

function destroyOwlCarousel() {
  var owl = $(".owl-carousel");
  //init carousel
  owl.owlCarousel();
    owl.data('owlCarousel').destroy();
  }
}

它似乎有效，但想知道这是否是这样做的正确方法？

Answer 1

以下示例有效。

初始化轮播：

owl = $("#owl-demo");

owl.owlCarousel({
  items: 10,
  autoPlay: 1000,
});

当您使用ajax回调时，请尝试：

owl.data('owlCarousel').destroy();

owl.owlCarousel({
  items: 5,
  autoPlay: 1000,
});

我创建了一个小提琴，向您解释如何重新初始化轮播：http://jsfiddle.net/s10bgckL/959/

PS：我没有创建一个选项数组，只是你想修改一些参数，如速度，显示项目的数量等。

我希望它有所帮助。

Answer 2

这应该有所帮助：

/*
 reinit() method reinitialize plugin 

 Syntax:
 owldata.reinit(newOptions)

 Yes! you can reinit plugin with new options. Old options
 will be overwritten if exist or added if new.

 You can easly add new content by ajax or change old options with reinit method.
 */

 $('.reinit').click(function(e){
 e.preventDefault()
 if(booleanValue === true){
  booleanValue = false;
  } else if(booleanValue === false){
  booleanValue = true;
}

owl.data('owlCarousel').reinit({
    singleItem : booleanValue
  });
})

Answer 3

试试$(window).load()而不是reinitialize

Answer 4

试试吧，它存在于owl documention：

//Initialize Plugin
    $(".owl-carousel").owlCarousel()

    //get carousel instance data and store it in variable owl
    var owl = $(".owl-carousel").data('owlCarousel');

    owl.reinit(options)

Answer 5

我经历了同样的问题，并尝试了reinit()方法，但它不适合我，所以我尝试破坏和init再次，它的工作。

$.ajax({
    type: 'get',
    url: '/api/v1/companies',
    ...,
    success: function(data) {
        $("#main-company-carousel").data('owlCarousel').destroy();
        $("#main-company-carousel").owlCarousel({
            items : 3 
        });
    }
});

Answer 6

$('#owl-demo').data('owlCarousel').reinit();