2014-09-05 141 views
0

任何人对我有什么建议吗?Flexslider 2.2旋转木马幻灯片不保持同步后animationLoop

我有一个Flexslider 2.2滑块和旋转木马我的网页,通过8个图像上滚动。在第八次之后,我将animationLoop设置为True,强制它继续重复八次。问题是,滑块和旋转木马已导航全部八个之后,滑块返回到幻灯片1,但旋转木马被卡住,直到滑块到达第二图像。然后旋转木马同步备份并适用于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> 
+0

没有人对我有什么想法? – user3453337 2014-09-16 18:32:21

回答

2

当初同样的问题,并提出了解决办法。

$('#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); 
      } 
     } 
     }); 
相关问题