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

我试图在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();
  }
}

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

解决方法:

以下示例有效.

初始化轮播：

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：我没有创建一个选项数组,只是你想修改一些参数,如速度,显示项目的数量等.

我希望它有所帮助.

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

相关文章