2014-09-05 97 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); 
      } 
     } 
     }); 
相關問題