gpt4 book ai didi

javascript - 猫头鹰 slider 单击下一个上一个会触发所有其他 slider 滑动

转载 作者:行者123 更新时间:2023-12-03 01:22:11 28 4
gpt4 key购买 nike

我在我的页面中使用猫头鹰 slider 。我总共有 4 个猫头鹰 slider ,它们在页面上动态显示。问题是,如果我单击接下来的特定 slider ,那么它也会滑动其他 3 个 slider block 。下面是我的完整代码。为了便于理解,我只保留了 2 个 slider 。

<div class="category-block-inner">
<div class="box">boxes</div>
<div class="box">boxes</div>
<div class="box">boxes</div>
<div class="box">boxes</div>

<div class="owl-navigation">
<div class="previous arrows" id="previous">
<i class="fa fa-angle-left"></i>
</div>
<div class="next arrows" id="twonxt1">
<i class="fa fa-angle-right"></i>
</div>
</div>
</div>
</div>


<div class="category-block-inner">
<div class="box">boxes</div>
<div class="box">boxes</div>
<div class="box">boxes</div>
<div class="box">boxes</div>

<div class="owl-navigation">
<div class="previous arrows" id="previous">
<i class="fa fa-angle-left"></i>
</div>
<div class="next arrows" id="twonxt1">
<i class="fa fa-angle-right"></i>
</div>
</div>
</div>
</div>


<script>
$(document).ready(function () {
var category1 = $(".category-block-inner");
category1.owlCarousel({
pagination: false,
items: 2,
itemsDesktop: [1199, 2],
itemsDesktopSmall: [1024, 2],
itemsTablet: [768, 1],
itemsMobile: [479, 1],
});

$(".next").click(function () {
$(category1).trigger('owl.next');
});

$(".previous").click(function () {
$(category1).trigger('owl.prev');
});
});
</script>

最佳答案

Owl-carousel 允许您使用简单的选项自定义“下一个-上一个”按钮:

 navText: ["yourPrevButton","yourNextButton"]

还允许使用 html,因此您可以做任何您想做的事情。查看所有选项:https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

对于您的问题,您必须执行多个 owl-carousel 实例,而不仅仅是 1。解决方案可能是创建 owl-carousel 实例的循环(小心:此解决方案仅在以下情况下有效所有轮播都有相同的选项。

结合这两点,你就有了这样的解决方案:

$(".category-block-inner").each(function(){

$(this).owlCarousel({
dots:false, // your pagination?
items: 2,
nav:true,
navText: ["MyPrevButton","MyNextButton"],
itemsDesktop: [1199, 2],
itemsDesktopSmall: [1024, 2],
itemsTablet: [768, 1],
itemsMobile: [479, 1],
});

})
<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.3.4/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/>

<div class="category-block-inner owl-carousel owl-theme">
<div class="item">boxes</div>
<div class="item">boxes</div>
<div class="item">boxes</div>
<div class="item">boxes</div>
</div>



<div class="category-block-inner owl-carousel owl-theme">
<div class="item">boxes</div>
<div class="item">boxes</div>
<div class="item">boxes</div>
<div class="item">boxes</div>
</div>

关于javascript - 猫头鹰 slider 单击下一个上一个会触发所有其他 slider 滑动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51726129/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com