猫头鹰旋转木马定位潜水
Owl carousel locating divs
我正在使用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"answers"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');
});
}
}
});
Live here: http://codepen.io/raduchiriac/pen/doLQdg?editors=101
下一件事是优化一下,因为它非常非常丑陋。
相关文章:
- CSS-如何定位内容数据标题
- Jquery菜单操作不稳定,定位不正确,存在一般错误
- 显示5秒后隐藏潜水
- 在Jquery detachment()和appendTo()之后定位元素
- 困在逻辑中试图定位动态的东西
- 点击后隐藏潜水?(但如果Div是一面旗帜呢?)
- 绝对定位不适用于Javascript DIV
- JQuery UI可拖动潜水与滚动棒到鼠标
- 多重潜水淡入淡出打开
- Jquery定位代码并调用它
- iPhone:固定位置潜水不可见
- 如何在容器中定位旋转的图像
- Highcharts-图表外的图例定位
- .scroll()函数在上次更新后在谷歌chrome中定位闪烁
- 刷新潜水内容不起作用
- 谷歌地图点击潜水触发信息窗口
- 如何在CSS或Javascript中定位选定的属性(在HTML选项中)
- 地理定位api和谷歌地图出错
- 定位浮动潜水器
- 猫头鹰旋转木马定位潜水