代码之家 › 专栏 › 技术社区 › jsg

猫头鹰转盘定位装置

owl-carousel-2 css html jquery javascript

0

jsg · 技术社区 · 9 年前

我正在使用猫头鹰旋转木马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定位在center旁边,把第二个div定位在center旁边

1 回复 | 直到 9 年前

1

0

Radu Chiriac 9 年前

好了,在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

下一步是对它进行优化,因为它非常难看。