文章/答案/技术大牛

发布

社区首页 >问答首页 >Flexslider 2.2转盘幻灯片在animationLoop之后不能保持同步

问Flexslider 2.2转盘幻灯片在animationLoop之后不能保持同步
EN

Stack Overflow用户

提问于 2014-09-05 22:33:51

回答 1查看 977关注 0票数 0

有人对我有什么建议吗？

我有一个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

Stack Overflow用户

发布于 2014-10-17 22:57:26

有相同的问题，并做了一个解决办法。

 $('#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);
            }
        }
      });

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/25688302

复制

相似问题

问Flexslider 2.2转盘幻灯片在animationLoop之后不能保持同步
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Flexslider 2.2转盘幻灯片在animationLoop之后不能保持同步EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Flexslider 2.2转盘幻灯片在animationLoop之后不能保持同步
EN