Question

我使用$(document).ready加载脚本：

$(document).ready(function (){
    $('.flexslider').flexslider({
       animation: 'fade',
       controlsContainer: '.flexslider'
    });
});

接下来我想通过按钮更改选项“动画”：

<div class="container span12 menu">
    <a id="link-fade" class="menubtn" href="#">FADE</a>
    <a id="link-slide" class="menubtn" href="#">SLIDE</a>
</div>

但这不起作用：

$(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;
    });
});

Answer 1

在我看来，唯一的方法是删除整个元素，创建新元素并使用新元素调用flexslider函数。 “animation”参数仅在窗口小部件初始化期间使用。

Answer 2

这可能是一个古老的问题，但我想，因为这是我在Google上遇到问题的第一批结果之一，我会分享我的解决方案。

@ Mackiee的答案让我走了一半（谢谢！），但我无法在任何一个地方找到丢失的碎片。我发现解决问题的方法是（1）使用Flexslider的start属性将合理的值 - 即flexslider中的滑块对象 - 分配给flexslider变量，（2）通过将该变量附加到javascript的window对象来使该变量成为全局变量，以便它可以从{{1}的范围之外到达} callback，然后（3）更改滑块对象的start属性以修改flexslider选项。之后，您可以随时随地更改附加在滑块上的任何属性。

下面的完整（示例）代码：

vars

希望这可以帮助其他人寻找这个或类似问题的答案。：）

Answer 3

虽然这是未经测试的，但我确实在Docs中找到了这一小段代码：

  $(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，它已经初始化了 - 你必须通过通常，大多数的属性重新调整它插件/程序员卡特，只要他们的变量以某种方式公开调整=）

Answer 4

声明你的滑块并用数据捕捉对象......像这样：

$('.selector').flexslider({
    animation: 'slide',
    ...
});
var flexslider = $('.selector').data('flexslider');

现在你可以在声明之后操纵这些东西：

$(window).resize(function() {
    flexslider.vars.animation = 'fade';
)};

使用新选项重新初始化现有的jQuery flexslider

4 个答案: