1

同期された2つのFlexSlider2を使用しているため、1つはメインスライダーのサムネイルカルーセルナビゲーションとして機能します。メインのスライドショーでスライドショーをtrueに設定し、ナビゲーションとして同期されたスライダーでfalseに設定しました。FlexSldier2がthumbnavの2番目のスライドにアクティブなクラスを追加しないことを除いて、すべてがスムーズに機能します。ただし、大きなメイン画像は正常に遷移します。私はすべての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

これは Flexslider 自体の問題です。

「canAdvance」関数 [Flexslider バージョン 2.2.0 の 797 行目] で、次のように変更slider.pageCountします。slider.count

于 2014-06-03T13:36:41.737 に答える