Question

我正在使用2个FlexSlider2同步，因此可以作为主滑块的缩略图轮播导航。我在主幻灯片放映时将幻灯片设置为true，在滑块同步为导航时设置为false。一切顺利，除了FlexSldier2没有为Thumbnav中的第二张幻灯片添加活动类，它只是向右跳过它。然而，大的主图像转换得很好。我搜索了所有的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>

Answer 1

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

Answer 2

这是Flexslider本身的一个问题。

在＆＃34; canAdvance＆＃34;函数[Flexslider版本2.2.0的第797行]，只需将slider.pageCount更改为slider.count

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

2 个答案: