Flexslider 2.2 轮播幻灯片在动画循环后不保持同步答案

【问题标题】：Flexslider 2.2 Carousel slides don't stay synced after animationLoopFlexslider 2.2 轮播幻灯片在动画循环后不保持同步
【发布时间】：2014-10-30 13:12:28
【问题描述】：

有人对我有什么建议吗？

我的页面上有一个 Flexslider 2.2 滑块和轮播，可以滚动浏览 8 张图片。在第八个之后，我将 animationLoop 设置为 True 以强制它继续重复八个。问题是在 Slider 和 Carousel 导航完所有八个之后，Slider 会返回到 Slide 1，但 Carousel 会卡住，直到 Slider 到达第二张图像。然后轮播同步备份并适用于 2-8 张幻灯片。

可见：http://www.raggeddaisy.com

这是我的头：

<head>
    <title> Ragged Daisy - Handcrafted Home Decor </title>

    <!-- jQuery -->

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>

    <!-- Syntax Highlighter -->
    <script type="text/javascript" src="~/Scripts/shCore.js"></script>
    <script type="text/javascript" src="~/Scripts/shBrushXml.js"></script>
    <script type="text/javascript" src="~/Scripts/shBrushJScript.js"></script>
    <script src="~/Scripts/modernizr.js"></script>

    <!-- Optional FlexSlider Additions -->
    <script src="~/Scripts/jquery.easing.js"></script>
    <script src="~/Scripts/jquery.mousewheel.js"></script>

      <!-- FlexSlider -->
    <script src="~/Scripts/jquery.flexslider.js"></script>
    <script src="~/Scripts/jquery.flexslider-min.js"></script>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
    <link rel="stylesheet" href="~/Content/flexslider.css" type="text/css" media="screen" />

</head>

这是我的身体：

<body>
    <div id="bodyHeader" class="bodyHeader">
        HOME
    </div>
    <div id="bodyText" class="bodyText">
        Welcome to Ragged Daisy! We are a family-owned operation dedicated to designing quality, handcrafted home decor. All of our pieces are uniquely created from scratch using quality materials designed to last. We take pride in our craftsmanship from start to finish, as each piece is expertly made with exceptional precision and care. 
        <br> <br> 
        Our collections are all hand finished to produce a beautiful depth of color and texture. Whether you are looking to capture the warmth and playful charm of softly worn, authentic pieces, or emphasize glamour and elegance with chic, sophisticated pieces, our collection is designed to add flare and functionality in all the spaces you live, work and play.
        <br> <br> 
        Ragged Daisy is located just a few miles north of Minneapolis, Minnesota, USA. We ship product locally and nationally. We are honored when you choose us to create a special handcrafted piece for your space. Our collections are evolving and growing so please check back with us!

    </div>

<!-- Beginning of Slideshow -->

    <div id="main" role="main">
      <section class="slider">
        <div id="slider" class="flexslider">
          <ul class="slides">
            <li>
                <img src="~/Images/Products/WoodenSign/PNG/1-AMORE.PNG" alt="Ragged Daisy - Decorative AMORE Wooden Sign" />
            </li>
            <li>
                <img src="~/Images/Products/MagneticBoard/PNG/1-SmallProvincial_tanswirls.png" alt ="Ragged Daisy - Magnetic Board with Provincial Stain and Tan Swirls Fabric"/>
            </li>
             <li>
                <img src="~/Images/Products/Bench/PNG/1-BenchFullShot.png" alt ="Ragged Daisy - Stylish Wooden Pallet Bench"/>
            </li>
            <li>
                <img src="~/Images/Products/Bench/PNG/2-CabinRight.png" alt="Ragged Daisy - Stylish Wooden Pallet Bench Provincial Stain" />
            </li>
            <li>
                <img src="~/Images/Products/MagneticBoard/PNG/2-vintagewhiteframe_mexicanfiesta_fullshot.png" alt ="Ragged Daisy - Magnetic Board with Vintage White Frame and Mexican Fiesta Fabric"/>
            </li>
            <li>
                <img src="~/Images/Products/MagneticBoard/PNG/3-vintagewhiteframe_tanswirls_fullshot.png" alt ="Ragged Daisy - Magnetic Board with Vintage White Frame and Tan Swirls Fabric"/>
            </li>
            <li>
                <img src="~/Images/Products/MagneticBoard/PNG/4-TurquoiseBoard_outsideshot.png" alt ="Ragged Daisy - Magnetic Board with Turquoise Weathered Finish with Metal and Hooks"/>
            </li>
            <li>
                <img src="~/Images/Products/WoodenSign/PNG/3-LOVE.PNG" alt="Ragged Daisy - Decorative LOVE Wooden Sign"/>
            </li>
          </ul>
        </div>
        <div id="carousel" class="flexslider">
          <ul class="slides">
            <li>
                <img src="~/Images/Products/WoodenSign/PNG/1-AMORE.PNG" alt="Ragged Daisy - Decorative AMORE Wooden Sign" />
                </li>
            <li>
                <img src="~/Images/Products/MagneticBoard/PNG/1-SmallProvincial_tanswirls.png" alt ="Ragged Daisy - Magnetic Board with Provincial Stain and Tan Swirls Fabric"/>
            </li>
             <li>
                <img src="~/Images/Products/Bench/PNG/1-BenchFullShot.png" alt ="Ragged Daisy - Stylish Wooden Pallet Bench"/>
            </li>
            <li>
                <img src="~/Images/Products/Bench/PNG/2-CabinRight.png" alt="Ragged Daisy - Stylish Wooden Pallet Bench Provincial Stain" />
            </li>
            <li>
                <img src="~/Images/Products/MagneticBoard/PNG/2-vintagewhiteframe_mexicanfiesta_fullshot.png" alt ="Ragged Daisy - Magnetic Board with Vintage White Frame and Mexican Fiesta Fabric"/>
            </li>
            <li>
                <img src="~/Images/Products/MagneticBoard/PNG/3-vintagewhiteframe_tanswirls_fullshot.png" alt ="Ragged Daisy - Magnetic Board with Vintage White Frame and Tan Swirls Fabric"/>
            </li>
            <li>
                <img src="~/Images/Products/MagneticBoard/PNG/4-TurquoiseBoard_outsideshot.png" alt ="Ragged Daisy - Magnetic Board with Turquoise Weathered Finish with Metal and Hooks"/>
            </li>
            <li>
                <img src="~/Images/Products/WoodenSign/PNG/3-LOVE.PNG" alt="Ragged Daisy - Decorative LOVE Wooden Sign"/>
            </li>
          </ul>
        </div>
      </section>
  </div>

    <script type="text/javascript">
    $(function(){
      SyntaxHighlighter.all();
    });
    $(window).load(function(){
      $('#carousel').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: true,
        slideshow: false,
        itemWidth: 105,
        itemMargin: 0,
        asNavFor: '#slider'
      });

      $('#slider').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: true,
        slideshow: true,
        sync: "#carousel",
        start: function(slider){
          $('body').removeClass('loading');
        }
      });
    });
  </script>

</body>

【问题讨论】：

有人对我有什么想法吗？

标签： slider slideshow carousel flexslider

【解决方案1】：

遇到了同样的问题并解决了。

 $('#slider').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: true,
        slideshow: true,
        sync: "#carousel",
        start: function(slider){
          $('body').removeClass('loading');
        }
        before: function(slider){         
            if(slider.currentSlide == 0 && slider.direction == "prev"){ //start
                var carousel = $(slider.vars.sync).data('flexslider');
                carousel.flexAnimate(carousel.last);

            }else if( slider.currentSlide == slider.last && slider.direction == "next"){ // end
                var carousel = $(slider.vars.sync).data('flexslider');
                carousel.flexAnimate(0);
            }
        }
      });

【讨论】：