使用新选项重新初始化现有的jQuery flexslider
我使用$(document).ready来加载脚本：
$(document).ready(function (){ $('.flexslider').flexslider({ animation: 'fade', controlsContainer: '.flexslider' }); });
接下来我想通过按钮更改选项“动画”：
但这不起作用：
$(document).ready(function (){ $('#link-fade').click(function(){ $('.flexslider').flexslider({ animation: 'fade', controlsContainer: '.flexslider' }); return false; }); $('#link-slide').click(function(){ $('.flexslider').flexslider({ animation: 'slide', controlsContainer: '.flexslider' }); return false; }); });
虽然这是未经测试的，但我确实在文档中找到了这一小段代码：
$(window).load(function() { // store the slider in a local variable var flexslider; /** * Animation with Fade for * default **/ $('.flexslider').flexslider({ animation: "fade" }); /** * On click, directly change * the public .vars within flexslider. **/ $(document).on('click', function(){ flexslider.vars.animation = "slide"; }); });
注意，这只适用于Flexslider 2.2.0：
"Made all slider variables public, stored in slider.vars"
来源 ：FlexSlider文档https://github.com/woothemes/FlexSlider
至于你的代码，第二次点击不会像JakubMichálek在评论中提到的那样，它已经初始化了 – 你必须通过大多数插件/程序员通常使用的属性重新调整它，只要他们的变量是公开可调的某种方式=）
在我看来，唯一的方法是删除整个元素，创建新元素并使用新元素调用flexslider函数。 “animation”参数仅在窗口小部件初始化期间使用。
这可能是一个古老的问题，但我想，因为这是我在Google上遇到问题的第一批结果之一，我会分享我的解决方案。
@MackieeE的回答让我走了一半（谢谢！），但我找不到任何一个地方丢失的碎片。 我发现解决问题的方法是（1）使用Flexslider的start属性将一个合理的值 – 即flexslider中的滑块对象 – 分配给flexslider变量， （2）通过将该变量附加到javascript的window对象来使该变量全局化，以便它可以从start回调范围之外到达，然后（3）更改slider对象的vars属性以修改flexslider选项。 之后，无论何时何地，您都可以随时更改附加在滑块上的任何属性。
完整（示例）代码如下：
// Initialize Flexslider with some options, and // give a reasonable definition for the variable $('.flexslider').flexslider({ maxItems: 4, slideshow: true, animation: "slide", start: function(slider){ window.flexslider = slider; }, }); // Modify option(s) in a click event $('#some-element').click(function(){ if(typeof window.flexslider !== 'undefined') { window.flexslider.vars.maxItems = 5; window.flexslider.vars.animation = "fade"; window.flexslider.vars.slideshow = false; } });
希望这可以帮助其他人寻找这个或类似问题的答案。 🙂
声明滑块并使用数据捕获对象…像这样：
$('.selector').flexslider({ animation: 'slide', ... }); var flexslider = $('.selector').data('flexslider');
现在你可以在声明之后操纵这些东西：
$(window).resize(function() { flexslider.vars.animation = 'fade'; )};