jquery - 了解缩略图轮播中的显示元素

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。

我尝试了什么:我只能实现悬停效果，因为我可以使用 hover 事件来触发其他 sibling 变得模糊。

而且我计划在包装器中包含带有 before & after 的不透明 block ，但这些看起来仍然不是合适的解决方案

编辑:我正在使用 owl carousel

Answer 1

猫头鹰插件似乎不像其他一些插件那样直接。然而，下面将做你需要的。基本上，您可以提供一个 afterAction 选项，这是一个在幻灯片更改后调用的函数。

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

当您单击按钮时，它会从元素中获取该索引并将其与 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.)有关您可以在该函数内部访问哪些其他属性的信息