我正在使用 owl carousel 2,我正在使用中心功能。我有 5 个元素要显示在轮播上。是否可以使用 jquery 添加类以在轮播中查找某些 div,而不必在 div 上添加 id 或类。 http://owlcarousel.owlgraphic.com/demos/center.html
这是我的html
<div class="owl-carousel">
<div class="product"> Your Content </div>
<div class="product"> Your Content </div>
<div class="product"> Your Content </div>
<div class="product"> Your Content </div>
<div class="product"> Your Content </div>
<div class="product"> Your Content </div>
<div class="product"> Your Content </div>
</div>
这是我的js
$(document).ready(function () {
$(".owl-carousel").owlCarousel({
center: true,
items:5,
loop:true,
margin:0,
responsive:{
600:{
items:5
}
},
nav:true
});
});
如果您要在现场观看实际的轮播,我想要的是添加这两个类“a”和“b”
<div class="owl-carousel">
<div class="product"> Your Content </div>
<div class="product b"> Your Content </div>
<div class="product a"> Your Content </div>
<div class="product center"> Your Content </div>
<div class="product a"> Your Content </div>
<div class="product b"> Your Content </div>
<div class="product"> Your Content </div>
</div>
所以我基本上是在尝试定位中心旁边的 div 和中心旁边的第二个 div
最佳答案
好了,1 分钟试用:
$("#owlSlider").owlCarousel({
navigation : false,
autoPlay:true,
afterMove : function (elem) {
var lng = $('.product').length,
a = [],
b = [];
if(!!$('.center').length) {
$('.a, .b').removeClass('a b');
a.push($('.center').index()-1>=0?$('.center').index()-1:lng-1);
a.push($('.center').index()+1<lng?$('.center').index()+1:0);
b.push($('.center').index()-2>=0?$('.center').index()-2:lng-2);
b.push($('.center').index()+2<lng?$('.center').index()+2:$('.center').index()+2-lng);
a.forEach(function(item){
$('.product:eq('+item+')').addClass('a');
});
b.forEach(function(item){
$('.product:eq('+item+')').addClass('b');
});
}
}
});
住在这里:http://codepen.io/raduchiriac/pen/doLQdg?editors=101
下一步是稍微优化一下,因为它非常非常难看。
关于javascript - 猫头鹰轮播定位div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32011132/