1

我正在使用 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>

4

2 回答 2

0

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

于 2013-08-30T07:49:49.273 回答
0

这是 Flexslider 本身的问题。

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

于 2014-06-03T13:36:41.737 回答