如何在ajax调用后重新初始化Owl Carousel? [英] How to reinitialize Owl Carousel after ajax call?
本文介绍了如何在ajax调用后重新初始化Owl Carousel?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图在成功的ajax调用后重新初始化owl轮播。 ajax调用将更改数据,但视图应保持不变。我遇到的问题是视图轮播结构不会重新初始化。我不知道我错在哪里。
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 carousel structure will not reinitialize. I don't know where I did mistake.
Ajax请求
$(document).on('click', '.category_list', function() {
var category_id = $(this).attr('data-id');
var _token = $('#_token').val();
var param = 'category_id=' + category_id + '&_token=' + _token;
$.ajax({
type: "POST",
datatype: "json",
url: "/master/sub_category",
data: param,
success: function(result) {
$('#test').html(result);
var owl = $(".owl-carousel");
owl.owlCarousel({
items: 4,
navigation: true
});
}
});
});
控制器功能
public function getImg() {
$post_data = Request::all();
$sub_img = $this->imgModel->getImgList($post_data);
$sub_img_html = '';
foreach ($sub_img ['data'] as $data_img ) {
$img = '/img/sub_category/'.$data_img ['img'];
$sub_img_html .= '<div class="item">';
$sub_img_html .= '<img src="'.$img.'" />';
$sub_img_html .= '</div>';
}
echo $sub_img_html;
}
查看
<div id="demo">
<div id="test" class="owl-carousel">
<?php
if (!empty($img_category)) {
foreach ($img_category as $imgcategory){
?>
<div class="item">
<img src='/img/sub_category/<?= imgcategory['subcategory_img'] ?>'/></div>
<?php
}
}
?>
</div>
</div>
推荐答案
根据您的代码我做出更改请申请此我希望此代码能够正常工作。
As per your code I make changes please apply this I hope this code work full.
success: function(result) {
$('#demo').html('<div id="testing" class="owl-carousel"></div>');
for(var i=0;i<result.length;i++){
$(".owl-carousel").append('<div class="item"><img src="/img/sub_category/'+result[i].subcategory_img+'" /></div>');
};
var owl = $("#testing");
owl.owlCarousel({
items: 4,
navigation: true
});
这篇关于如何在ajax调用后重新初始化Owl Carousel?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文