Question

Iam尝试使用ajax在owl carousal中添加数据。但是它将数据添加到另一个之下。

HTML

＆＃13;

<div id="hd_estrutura">
<div class="bot_e">
<h1>Name</h1>
</div>
<div class="fa"></div>
<div class="boxouter">		
<div id="imgbox" class="owl-carousel owl-theme imgbox">
<div id="load"></div>//trying to load data from ajax here
</div></div>
</div> </div></div><!-- fim .miolo -->

＆＃13;

的Ajax

＆＃13;

$.ajax(
{
type:"post",
url: "<?php echo base_url(); ?>Ctrl/test",
data:{ 's_id':s_id},
success:function(data)
{ 
$("#load").append(data);
}
}
);

＆＃13;

数据需要在id加载

的div中追加

＆＃13;

<div  class="item"><a href="" class="paraent-container" ><img src=""></a><ul><li ><p class="name">huj</p></li><li><p class="value">ghj</p> </li></ul><button id="testbutton" class="snip1479">Add to cart 1</button></div>

＆＃13;

Answer 1

试试这个

＆＃13;

$.ajax(
{
type:"post",
url: "<?php echo base_url(); ?>Ctrl/test",
data:{ 's_id':s_id},
success:function(data)
{ 
 $('#load').html('<div id="imgbox" class="owl-carousel owl-theme imgbox"></div>');
$(".owl-carousel").append(data);
$("#imgbox").owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
});
}
}
);

＆＃13;

注意：请忽略语法错误。

Answer 2

旋转木马中物品的对齐是通过javascript完成的。当加载轮播是空的时，插件不会调整任何大小。但是当您使用ajax查询添加内容时，您不会调用插件并要求它对齐项目。您需要调用您的插件，只需后附加数据，不是在加载页面时。

$.ajax({
    type:"post",
    url: "<?php echo base_url(); ?>Ctrl/test",
    data:{ 's_id':s_id},
    success:function(data)
    {
        $("#load").append(data);
        $("#load").owlCarousel({
            loop:true,
            margin:10,
            nav:true,
            responsive:{
                0:{
                    items:1
                },
                600:{
                    items:3
                },
                1000:{
                    items:5
                }
            }
        })
    }
});

使用ajax，jquery将数据附加到owl carousal

2 个答案: