Question

我试图在成功的ajax调用后重新初始化Owl轮播。 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()方法，但它对我不起作用，所以我尝试了再次销毁和初始化它并且有效。

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

Answer 6

此版本在第二版中对我有效

var owl = $('#owl-carousel');
owl.trigger('destroy.owl.carousel');
owl.owlCarousel({
   items: 1,
});

Answer 7

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

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

修改

7 个答案: