知道缩略图轮播中的显示项目

Question

我的工作轮播有类似的结构

<ul class="carousel">
  <li><img src="thumbnail.jpg" alt=""/></li>
  <li><img src="thumbnail.jpg" alt=""/></li>
  <li><img src="thumbnail.jpg" alt=""/></li>
  <li><img src="thumbnail.jpg" alt=""/></li>
  <li><img src="thumbnail.jpg" alt=""/></li>
  <li><img src="thumbnail.jpg" alt=""/></li>
  <li><img src="thumbnail.jpg" alt=""/></li>
  <li><img src="thumbnail.jpg" alt=""/></li>
</ul>

此时有三个缩略图显示。并且在单击next-prev时，或者默认情况下列表中没有差异（例如，没有添加任何类来显示三个或没有显示其他类别）。而且我必须将中间的一个从显示在旋转木马中的那个上移开。

所以我的问题是如何识别哪些li's正在显示。

我尝试了什么： 我只能在悬停效果上实现，因为我可以使用hover事件来触发其他兄弟模糊。

我打算在包含before & after的情况下添加不透明块，但这些看起来还不合适

修改：我正在使用owl carousel

Answer 1

似乎owl插件并不像其他插件那样直截了当。但是，以下将满足您的需求。基本上，您可以提供afterAction选项，该选项是在幻灯片更改后调用的函数。

我已使用此函数在change事件内部检测当前幻灯片索引，并将其作为数据属性添加到目标元素上。

单击该按钮时，它会从元素中获取该索引，并将其与jQuery的.eq()一起使用，以查找当前的.item元素：

$(document).ready(function() {

  var owl = $("#owl-demo"),
    status = $("#owlStatus");

  owl.owlCarousel({
    navigation: true,
    afterAction: function() {
      owl.data('currentItem', this.owl.currentItem);
    }
  });

  $('#getCurrent').click(function() {
    var cur = owl.data('currentItem') || 0; // the "or 0" here makes sure that there is an initial value if the user selects something before changing the slider at all
    var $currentItem = owl.find('.item').eq(cur);
    $currentItem.addClass('red');
    console.log($currentItem);
  });

});

Here is a jsFiddle

有关您可以在该功能内部访问的其他属性的信息，请参阅How to retrieve basic information from plugin (current, prev, all items, visible items etc.)