Question

我正在使用没有内置缩略图导航的旋转木马jquery插件，因此我正在尝试构建一个穷人的版本。

我正在使用Owl Carousel插件。

因此，对于这个实例，我需要的是，如果主旋转木马中的幻灯片div具有类.active，那么我需要在第二个旋转木马中有一个div，它具有相同的索引，以获得一个活跃的班级。

主要轮播代码：

    <div id="slide1">
        <div class="owl-wrapper-outer">
            <div class="owl-wrapper">
               <div class="owl-item"></div>
               <div class="owl-item active"></div>
               <div class="owl-item"></div>
            </div>
        </div>
    </div>

然后这是我用作导航的旋转木马：

<div id="slide2">
   <div class="owl-wrapper-outer">
       <div class="owl-wrapper">
           <div class="owl-item"></div>
           <div class="owl-item"></div>  <!-- this should automatically get .active added -->
           <div class="owl-item"></div>
       </div>
   </div>
</div>

我不知道如何获取两个元素的索引，然后将类激活添加到＃slide2以使它们匹配。

好的，这是一个更新，感谢Michael Schmuki提供的代码。我将此代码添加到幻灯片移动时已经使用的函数..并且它可以工作..但是，在我的＃slide1的幻灯片中，它一次显示两个幻灯片。好处是这两个幻灯片都自动添加了活动类，但是当我在此代码中添加时，＃slide2中只有一个缩略图获得活动类。有没有理由没有拿起两张活动幻灯片？

这是我正在使用的函数的一部分：

function animateIn(carousel){
  var carousel = $('#slide1');
  var nthChildActive = $(this).find(".active").index() + 1;
  $('#slide2 .owl-item .slide.active').removeClass('active');
  $("#slide2 .owl-wrapper .owl-item:nth-child("+nthChildActive+")").addClass("active");
}

这是在Owl Carousel中设置的地方

carousel.owlCarousel({
  items: 2,
   pagination:false,
   stopOnHover:true,
   afterMove: function() {
     animateIn();
      }
    });

Answer 1

您可以检测并标记（多个）活动元素，如下所示：

//detect & mark
$("#slide1 .owl-item").each(function(index) {
  if($(this).hasClass("active"))
    $("#slide2 .owl-item:nth-child("+(index+1)+")").addClass("active");
});

您可以在http://jsbin.com/oHOyEZi/7/edit?js,output

上使用新示例

但是我对Owl Carousel并不熟悉，所以你必须自己弄清楚如何指定，当旋转木马实际滑动时会触发这个逻辑。

jQuery将相同的类添加到两个不同容器中的相同元素索引

1 个答案: