我想在wl carousel 2(本机)中找到center
项,而不是像class
那样被$('.owl-item.center')
选择,我想通过owl carousel本机函数和结果来查找它我可以获得事件,并且有很多结果,我可以获得与center
$('.owl-carousel').owlCarousel({
center: true,
items: 3,
loop: false,
margin: 10,
});
$('.owl-carousel').on("dragged.owl.carousel", function(e) {
console.log(e);
if (e.itemClass === 'center') {
alert('it is center one!');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha256-UhQQ4fxEeABh4JrcmAJ1+16id/1dnlOEVCFOxDef9Lw=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha256-pTxD+DSzIwmwhOqTFN+DB+nHjO4iAsbgfyFq5K5bcE0=" crossorigin="anonymous"></script>
<div class="owl-carousel">
<div class="item">
<h4>1</h4>
</div>
<div class="item">
<h4>2</h4>
</div>
<div class="item">
<h4>3</h4>
</div>
<div class="item">
<h4>4</h4>
</div>
<div class="item">
<h4>5</h4>
</div>
<div class="item">
<h4>6</h4>
</div>
</div>
我该如何在本地检测猫头鹰轮播2中心项目?再次,我不想使用center
find
或任何其他选择器通过each
类通过jquery查找项目,我想用猫头鹰给我。
答案 0 :(得分:1)
我不认为猫头鹰传送带提供了这样的选项来获取事件结果中的中心项目。您可以像这样稍微棘手,仅将e.item.index
设为当前活动项,然后+1
以获得居中项。查看下面的示例:
$('.owl-carousel').owlCarousel({
center: true,
items: 3,
loop: false,
margin: 10,
});
$('.owl-carousel').on("dragged.owl.carousel", function(e) {
console.log('center item is:'+ (e.item.index + 1));
});
.item {
border: 1px solid;
text-align: center;
}
.owl-item.active.center {
background: gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha256-UhQQ4fxEeABh4JrcmAJ1+16id/1dnlOEVCFOxDef9Lw=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha256-pTxD+DSzIwmwhOqTFN+DB+nHjO4iAsbgfyFq5K5bcE0=" crossorigin="anonymous"></script>
<div class="owl-carousel">
<div class="item">
<h4>1</h4>
</div>
<div class="item">
<h4>2</h4>
</div>
<div class="item">
<h4>3</h4>
</div>
<div class="item">
<h4>4</h4>
</div>
<div class="item">
<h4>5</h4>
</div>
<div class="item">
<h4>6</h4>
</div>
</div>