如何在ajax调用后重新初始化Owl Carousel
我试图在成功的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
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：我没有创建一个选项数组，只是你想修改一些参数，如速度，显示项目的数量等。
我希望它有所帮助。
这应该有所帮助：
/* 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 }); })
尝试$(window).load()而不是reinitialize
尝试一下，它存在于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)
我经历了同样的问题并尝试了reinit()方法，但它对我不起作用，所以我尝试了再次销毁和初始化它并且有效。
$.ajax({ type: 'get', url: '/api/v1/companies', ..., success: function(data) { $("#main-company-carousel").data('owlCarousel').destroy(); $("#main-company-carousel").owlCarousel({ items : 3 }); } });
$('#owl-demo').data('owlCarousel').reinit();