Javascript ajax调用后如何重新初始化Owl Carousel？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27802064/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to reinitialize Owl Carousel after an ajax call?
提问by Richlewis
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 调用将更改数据，但视图应保持不变。我遇到了视图（轮播结构）不会重新初始化的问题。页面加载时一切正常。
I'm using version 1.3.3
我使用的是 1.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 页面上查看了这个问题并尝试了这些建议，但无济于事。
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?
它似乎有效，但想知道这是否是正确的做法？
回答by Eduardo
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.
我希望它有帮助。
回答by Ridham Tarpara
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()方法，但它对我不起作用，所以我再次尝试 destroy 和 init 并且它起作用了。
$.ajax({
type: 'get',
url: '/api/v1/companies',
...,
success: function(data) {
$("#main-company-carousel").data('owlCarousel').destroy();
$("#main-company-carousel").owlCarousel({
items : 3
});
}
});
回答by Govind Samrow
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)
回答by Chris
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
});
})
回答by Gopala raja naika
Try $(window).load()instead of reinitialize
尝试$(window).load()代替reinitialize
回答by venkat
$('#owl-demo').data('owlCarousel').reinit();
