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

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.

在一次成功的ajax调用之后，我试图重新初始化owl carousel。ajax调用将更改数据，但视图应该保持不变。我有一个问题，视图(旋转木马结构)不会重新初始化。页面加载时一切正常。

im using version 1.3.3

我使用v1.3.3

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

Ajax call

Ajax调用

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

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.

我是不是错过了我需要做的事情。我已经在github页面上查看了这个问题，并尝试了一些建议，但没有效果。

Any help appreciated

任何帮助表示赞赏

Edit

编辑

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?

这似乎是可行的，但不知道这样做是否正确?

6 个解决方案

#1

The example below works.

下面的例子。

Initializing the carousel:

初始化旋转木马:

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

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

And when you use the ajax callback, try:

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

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

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

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

我创建了一个小提琴来解释如何重新初始化旋转木马:http://jsfiddle.net/s10bgckL/959/

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

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

I hope it helps.

我希望它有帮助。

#2

This should help:

这应该有助于:

/*
 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
  });
})

#3

Try $(window).load() instead of reinitialize

尝试$(window).load()而不是重新初始化。

#4

Try it , its exist in owl documention :

试试吧，它存在于owl文档中:

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

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

    owl.reinit(options)

#5

I went through the same problem and tried reinit() method but it was not working for me, so I tried destroy and init again and it worked.

我经历了同样的问题，尝试了reinit()方法，但它对我不起作用，所以我又尝试了销毁和init，结果成功了。

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

#6

-2

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

#1