Use Flexslider's selector property to skip some slides in DOM descending order

问题

Why can't I have Flexslider's "selector" property to work properly when targeting slides that are not the very one after the other in DOM order?

Basically, I found that targeting .testA would work whereas targeting .testB, .testC, or .testD would fail.

<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>

Failing here actually means that it displays properly at first, but when clicking on the last slide of the thumbnail navigation carousel, it would scroll into "nothing" (white background)...

Here is the JSFiddle, which is a copy of the Thumbnail Slider official sample implementation (link enclosed in the Fiddle) to which I added classes and a custom selector. To check the various targeting options you may want to add comment mark to current selector parameter in the JS window and remove it from the following, both for #slider & #carousel divs.

回答1:

The issue is occurring because of L.164 in Flexslider target = $slide.index();

Here jquery's index function is responsible for deciding the proper target to which the flexslider navigates to. To better understand and fix the issue, let's have a look at the different invocations of the index function -

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.

Now in your case, for example, if 1st and 4th images are selected/visible out of a total of 4, then as per the current invocation of the index function in flexslider, the index values returned are 0 and 3 as its still looking in the original list of images and not in the filtered/matched list due to which the flexslider navigates incorrectly. The correct values obviously in this case would be 0 and 1 and that is why the issue is never there for the 1st two slides.

Thus to fix the issue you need to use the second invocation of the index function in case of a custom selector. Replacing L.164 of Flexslider with the following in the default flexslider js file will solve the issue-

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

来源：https://stackoverflow.com/questions/26351155/use-flexsliders-selector-property-to-skip-some-slides-in-dom-descending-order