如何在ajax呼叫后重新初始化Owl Carousel？ [英] How to reinitialize Owl Carousel after an ajax call?

问题描述

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

I am trying to reinitialize Owl carousel after a successful ajax call. The ajax call will change the data but the view should stay the same.I am having an issue where the view (the carousel structure) will not reinitialize. Everything is fine upon page load.

我使用的是版本1.3.3

I'm using version 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页面上查看了这个问题并尝试了这些建议，但无济于事。

Am I missing something that I need to do? I have looked at this issue on the github page and tried the suggestions but to no avail.

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

From the advice given, I have created these two functions

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

它似乎有效，但想知道这是不是正确的方法吗？

It seems to work, but wondering if this is the correct way to be doing this?

推荐答案

以下示例有效。

初始化轮播：

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

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

当你使用ajax回调时，试试：

And when you use the ajax callback, try:

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

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

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

I create a fiddle to explain you how to re-initialize the carousel: http://jsfiddle.net/s10bgckL/959/

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

PS: I did not create an array of options just if you want to modify some parameters as speed, quantity of displayed items, etc.

我希望它有所帮助。

这篇关于如何在ajax呼叫后重新初始化Owl Carousel？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！