0

我正在使用一个没有内置缩略图导航的轮播 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");
}

这是在猫头鹰旋转木马中设置的地方

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

1 回答 1

2

您可以像这样检测和标记（多个）活动元素：

//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 不熟悉，所以你必须自己弄清楚如何指定，当轮播实际滑动时会触发这个逻辑。

于 2013-10-28T22:32:34.203 回答