如何在ajax调用后重新初始化Owl Carousel

Question

我试图在成功的ajax调用后重新初始化owl carousel.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
  });
})