Flex Slider，同步时跳过第二个缩略图答案

【问题标题】：Flex Slider, when synced skips 2nd thumbnailFlex Slider，同步时跳过第二个缩略图
【发布时间】：2013-03-09 17:51:15
【问题描述】：

我正在使用 2 个同步的 FlexSlider2，因此其中一个用作主滑块的缩略图轮播导航。我在主幻灯片上将幻灯片设置为 true，在同步为导航的滑块上设置为 false。一切都很顺利，除了 FlexSldier2 没有向缩略图中的第二张幻灯片添加活动类，它只是跳过它。然而，大的主图像过渡很好。我搜索了所有 voer，这是唯一相关的，但是那里也没有答案：https://github.com/woothemes/FlexSlider/issues/331。

下面是我的代码，JS 和 HTML。请让我知道是否有其他人经历过这种情况，因为我不知所措。

<script>
$(window).load(function() {
  // The slider being synced must be initialized first
  $('#thumbslide').flexslider({
    animation: "slide",
    controlNav: false,
    directionNav: true,
    animationLoop: true,
    slideshow: false,
    itemWidth: 250,
    itemMargin: 15,
    asNavFor: '#mainslide',

  });

  $('#mainslide').flexslider({
    animation: "fade",
    controlNav: false,
    directionNav: true,
    animationLoop: true,
    slideshow: true,
    initDelay: 50,
    slideshowSpeed: 6000,           //Integer: Set the speed of the slideshow cycling, in milliseconds
    animationSpeed: 600, 
    sync: "#thumbslide"
  });
});

    <div class="slidewrap">
<div id="mainslide"  class="flexslider">
    <ul class="slides">
        <li> <a href="/The-Primo-Story"> <img src="/images/slide1.png" /> </a> </li>
        <li> <a href="/rewards-cards"> <img src="/images/slide2.png" /> </a> </li>
        <li> <a href="/trays"> <img src="/images/slide3.png" /> </a> </li>
        <li> <a href="/Franchise"> <img src="/images/slide4.png" /> </a> </li>
        <li> <a href="#form_3"> <img src="/images/slide5.png" /> </a> </li>
        <li> <a href="/Locations-New"> <img src="/images/slide6.png" /> </a> </li>
    </ul>
</div>
<div id="thumbslide" class="flexslider">
    <ul class="slides">
        <li> <img src="/images/thumb1.jpg" /> <img src="/images/red.png" class="redpic" /> </li>
        <li> <img src="/images/thumb2.jpg" /> <img src="/images/red.png" class="redpic" /> </li>
        <li> <img src="/images/thumb3.jpg" /> <img src="/images/red.png" class="redpic" /> </li>
        <li> <img src="/images/thumb4.jpg" /> <img src="/images/red.png" class="redpic" /> </li>
        <li> <img src="/images/thumb5.jpg" /> <img src="/images/red.png" class="redpic" /> </li>
        <li class="last"> <img src="/images/thumb6.jpg" /> <img src="/images/red.png" class="redpic" /> </li>
    </ul>
</div>

【问题讨论】：

遇到同样的问题！找到答案了吗？

标签： apache-flex thumbnails carousel flexslider

【解决方案1】：

我认为这是因为 itemWidth 和 itemMargin。如果将“itemWidth: 250”替换为“itemWidth: 265”（265 = 250 + 15（即 itemMargin）），则问题应该得到解决。它对我有用。

【讨论】：

【解决方案2】：

这是 Flexslider 本身的问题。

在“canAdvance”函数中[Flexslider 2.2.0版的第797行]，只需将slider.pageCount更改为slider.count

【讨论】：

这对我也没有帮助:-(