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

How to reinitialize Owl Carousel after an ajax call?

本文关键字：初始化 Owl Carousel ajax 调用      更新时间：2023-09-26

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

我使用的是 1.3.3 版

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

阿贾克斯调用

$.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：如果您想修改某些参数（如速度、显示项目的数量等），我没有创建一系列选项。

我希望它有所帮助。

这个在版本 2 中对我有用

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

这应该有帮助： 

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

试试吧，它存在于猫头鹰文档中：

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

我遇到了同样的问题并尝试了reinit()方法，但它对我不起作用，所以我尝试再次销毁和初始化，它起作用了。

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

看看这个：

$.ajax({
            
            type: 'POST',
            url: '/wp-admin/admin-ajax.php',
            dataType: 'html',
            data: {
              category: catName,
            },    
            success: function(response) {
                    
                    $('.show_best_top_popular').html(response);
                    
                    var owl = $('.owl-carousal');
                    
                    owl.trigger('destroy.owl.carousel');
                    
                    owl.owlCarousel({
                        loop: true,
                        margin: 10,
                        nav: true,
                    });
                }
});

经过多次尝试，我做到了。谢谢。

尝试$(window).load()而不是reinitialize 

$('#owl-demo').data('owlCarousel').reinit();
相关文章：