有人对我有任何建议吗？
我的页面上有一个Flexslider 2.2 Slider和Carousel滚动浏览8张图像。在第八个之后，我将animationLoop设置为True以强制它继续重复八个。问题是，在Slider和Carousel导航了所有八个之后，Slider返回到幻灯片1，但是Carousel被卡住直到Slider到达第二个图像。然后Carousel同步备份并适用于2-8张幻灯片。
看到这是我的头：
<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 :(得分：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);
}
}
});