使用Flexslider的selector属性以DOM降序跳过某些幻灯片

为什么我不能让Flexslider的“selector”属性在DOM命令中定位不是一个接一个的幻灯片时正常工作？

基本上，我发现定位.testA会起作用，而目标.testB ， .testC或.testD会失败 。

在这里失败实际上意味着它首先正确显示，但是当点击缩略图导航轮播的最后一张幻灯片时，它会滚动到“无”（白色背景）……

这是JSFiddle ，它是Thumbnail Slider官方示例实现（包含在Fiddle中的链接）的副本，我在其中添加了类和自定义选择器。 要检查各种定位选项，您可能需要在JS窗口中为当前选择器参数添加注释标记，并从#slider和#carousel divs中删除以下内容。

Answer 1

问题出现是因为Flexslider中的L.164 target = $slide.index();

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

1. 如果没有将参数传递给.index（）方法，则返回值是一个整数，指示jQuery对象中第一个元素相对于其兄弟元素的位置。
2. 如果选择器字符串作为参数传递，则.index（）返回一个整数，指示jQuery对象中第一个元素相对于选择器匹配的元素的位置。

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

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

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