javascript Flexslider 无限循环
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15745865/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Flexslider infinite loop
提问by user822179
Need to fix the home page slider so it doesn't fly back through all slides at the end. Needs to be a seamless loop. But I don't know what I am doing wrong. Example: http://3dollar.vigorbranding.com/
需要修复主页滑块，使其在最后不会飞回所有幻灯片。需要是一个无缝循环。但我不知道我做错了什么。示例：http: //3dollar.vigorbranding.com/
<script type="text/javascript">
jQuery(window).load(function() {
jQuery('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: true,
itemWidth: 187,
itemMargin: 0,
asNavFor: '#slider'
});
jQuery('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
<?php if (ot_get_option('autoslide') == 'yes') { ?>
slideshow: true, //Boolean: Animate slider automatically
slideshowSpeed: <?php echo ot_get_option('delay') ?>,
<?php } else { ?>
slideshow: false,
<?php } ?>
sync: "#carousel",
start: function(slider) {
jQuery('body').removeClass('loading');
}
});
});
</script>
回答by kingkode
set the animationLoopto trueas opposed to false
设置animationLoop于true相对于false
回答by sifriday
I just had this same debate. animationLoop: true wasn't enough for me... I read the thread on this issue here:
我刚刚进行了同样的辩论。animationLoop: true 对我来说还不够......我在这里阅读了关于这个问题的线程：
https://github.com/woothemes/FlexSlider/issues/287
https://github.com/woothemes/FlexSlider/issues/287
and based on recommendations in this thread, I ended up converting to bxSlider:
根据此线程中的建议，我最终转换为 bxSlider：
http://bxslider.com/examples/carousel-dynamic-number-slides
http://bxslider.com/examples/carousel-dynamic-number-slides
which not only does the infinite loop perfectly, but its sizing model seems more intuitive; I have been able to align it with my grid more easily. If you think of:
这不仅完美地实现了无限循环，而且它的大小模型看起来更直观；我已经能够更轻松地将它与我的网格对齐。如果你想到：
[ item ][mgn][ item ][mgn][ item ][mgn][ item ][mgn]
(where mgn = margin)
（其中 mgn = 保证金）
then in flexslider if I adjust the item width and margin so that the slider is fully-justified:
然后在 flexslider 中，如果我调整项目宽度和边距以使滑块完全对齐：
[ page width ]
[ item ][mgn][ item ][mgn][ item ][mgn][ item ][mgn]
then once I had scrolled to the RH edge there was still a 'ghost slide' lurking off the RH edge that was the trailing margin:
然后一旦我滚动到 RH 边缘，仍然有一个“幽灵幻灯片”潜伏在 RH 边缘，这是尾随：
[ page width ]
[ item ][mgn][ item ][mgn][ item ][mgn][ item ][mgn]
ghost slide ^
bxSlider accounts for this perfectly.
bxSlider 完美地解释了这一点。
