我试图动态地将项目添加到猫头鹰轮播中。我是这样做的:
HTML
<div id="avatar-carousel" class="owl-carousel lesson-carousel">
<div class="item item-logo">
<div class="product-item">
<div class="carousel-thumb" style="height: 77px!important;width: 70px;" >
<img src="http://placehold.it/140x100" alt="">
</div>
</div>
</div>
<!-- Start Item -->
</div>
<button id="click">
click
</button>
JS
$("#avatar-carousel").owlCarousel({
items: 5
});
$("#click").click(function(){
$('#avatar-carousel').trigger('add.owl.carousel', ['<div class="item"><p>' + 'hh' + '</p></div>'])
.trigger('refresh.owl.carousel');
});
此代码没有任何反应。我无法看到错误。这是小提琴:JSFiddle。
编辑:
似乎代码是正确的,因为它在小提琴中工作。 我忘了提到旋转木马工作正常,它在开始时正确加载。问题是尝试添加项目时。什么都没发生,没有错误但没有添加项目。
答案 0 :(得分:3)
可能有两个常规错误:
onclick
事件时,该按钮不存在。
<form>
内,点击按钮提交整个表单(注意加载浏览器页面)。显示错误here。
$(document).ready(function() {
$("#avatar-carousel").owlCarousel({
nav: true,
items: 5
});
});
$("#click").click(function(e) {
e.preventDefault(); //-- prevent form submit
$('#avatar-carousel').trigger('add.owl.carousel', ['<div class="item"><img src="http://placehold.it/140x100" alt=""></div>'])
.trigger('refresh.owl.carousel');
});
&#13;
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<form action="" method="post">
<div id="avatar-carousel" class="owl-carousel">
<div class="item item-logo">
<img src="http://placehold.it/140x100" alt="">
</div>
</div>
<button id="click">
click
</button>
</form>
&#13;
答案 1 :(得分:0)
这里的所有答案似乎都很完美,但不是我的情况。可能被调用的事件与其他事件相冲突。所以我采取了另一种方式:
清除轮播的内容
$('#avatar-carousel').html('');
将新内容附加到轮播
imgs.forEach(function(img) {
$('#avatar-carousel').append(createImgCarousel(img));
});
其中imgs是图像网址数组,而createImgCarousel是一个创建轮播项目的函数。
最后重新初始化轮播
$("#avatar-carousel").owlCarousel({
navigation: true,
pagination: true,
slideSpeed: 1000,
stopOnHover: true,
autoPlay: true,
items: 5,
itemsDesktopSmall: [1024, 3],
itemsTablet: [600, 1],
itemsMobile: [479, 1]
});
它可能不那么干净,但现在可以使用了!