jquery - 使用 Flexslider 的选择器属性按 DOM 降序跳过某些幻灯片

Question

为什么我不能拥有 Flexslider 的 "selector"以 DOM 顺序定位不是一个接一个的幻灯片时，该属性能否正常工作？

基本上，我发现针对 .testA会工作，而定位 .testB , .testC , 或 .testD会失败。

<ul class="slides">

    <li class="testA testB"><img/></li>
    <li class="testA testC"><img/></li>
    <li class="testB testD"><img/></li>
    <li class="testC testD"><img/></li>

</ul>

失败这里实际上是说它一开始显示正常，但是当点击缩略图导航轮播的最后一张幻灯片时，它会滚动到“无”(白色背景)...

Here is the JSFiddle ，它是 Thumbnail Slider 官方示例实现(链接包含在 Fiddle 中)的副本，我向其中添加了类和自定义选择器。要检查各种目标选项，您可能需要将注释标记添加到 JS 窗口中的当前选择器参数并将其从以下选项中删除，两者都是 #slider。 & #carousel分区。

Answer 1

问题的发生是因为 L.164 in Flexslider target = $slide.index();

这里是 jquery 的 index函数负责决定 flexslider 导航到的正确目标。为了更好地理解和解决问题，让我们看一下索引函数的不同调用 -

1. If no argument is passed to the .index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.
   
   
2. If a selector string is passed as an argument, .index() returns an integer indicating the position of the first element within the jQuery object relative to the elements matched by the selector.

现在在你的情况下，例如，如果从总共 4 张图像中选择/可见第 1 和第 4 张图像，那么根据 flexslider 中索引函数的当前调用，返回的索引值为 0 和 3 作为其仍在查看原始图像列表，而不是在过滤/匹配列表中查看，因此 flexslider 导航不正确。在这种情况下，正确的值显然是 0 和 1，这就是为什么前两张幻灯片永远不会出现问题。

因此，要解决此问题，您需要在自定义选择器的情况下使用索引函数的第二次调用。替换 L.164 of Flexslider在默认的 flexslider js 文件中使用以下内容将解决问题-

    target = $slide.index("#carousel " + slider.slides.selector);