多个owl轮播导航不工作
多个owl轮播导航不工作
提问于 2018-12-09 11:50:33
在这里，我使用了我的owl carousel脚本，它工作得很好。我也想复制它，并用作第二个。因此，我复制了total carousel div，并将导航类名改为next2旁边。旋转木马与所有选项都工作良好，但复制的旋转木马的导航不工作。
第一个旋转木马：
<script>
$(document).ready(function() {
var owl = $("#owl-demo");
owl.owlCarousel({
autoPlay: 10500,
items : 6,
itemsDesktop : [1000,6],
itemsDesktopSmall : [900,4],
itemsTablet: [600,1],
itemsMobile : false,
pagination:false,
});
$(".next").click(function(){
owl.trigger('owl.next');
});
$(".prev").click(function(){
owl.trigger('owl.prev');
});
});
</script>复制的旋转木马：
<script>
$(document).ready(function() {
var owl2 = $("#owl-demo2");
owl2.owlCarousel({
autoPlay: 10500,
items : 4,
itemsDesktop : [1000,4],
itemsDesktopSmall : [900,3],
itemsTablet: [600,1],
itemsMobile : false,
pagination:false,
});
$(".next2").click(function(){
owl2.trigger('owl.next2');
});
$(".prev2").click(function(){
owl2.trigger('owl.prev2');
});
});
</script>我不明白为什么它不起作用。请帮帮我。谢谢。
回答 1
Stack Overflow用户
发布于 2021-01-09 15:39:32
你必须把你的幻灯片传给导航，检查下面的代码片段
$('.owl-navigations .right').click(function(e) {
e.preventDefault();
$('.'+$(this).data('slide')).trigger('next.owl.carousel');
return false;
})
$('.owl-navigations .left').click(function(e) {
e.preventDefault();
$('.'+$(this).data('slide')).trigger('prev.owl.carousel');
return false;
})<div class="owl-navigations">
<a href="#" data-slide="carousel-section-1" class="left">
<i class="fas fa-chevron-left"></i>
</a>
<a href="#" data-slide="carousel-section-1" class="right">
<i class="fas fa-chevron-right"></i>
</a>
</div>
<div class="owl-carousel">
<!-- items -->
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53689213
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号