3

我曾经$(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;
    });
});
4

4 回答 4

2

这可能是一个古老的问题，但我想，因为这是我在 Google 上针对该问题获得的首批结果之一，所以我会分享我的解决方案。

@MackieeE 的回答让我走了一半（谢谢！），但我在任何地方都找不到丢失的部分。我发现解决问题的是（1）使用 Flexslider 的属性为变量start分配一个合理的值 - 即来自 flexslider 的滑块对象 - （2）通过将该变量附加到 javascript 的对象来使该变量成为全局变量，以便可以从在回调范围之外，然后（3）更改滑块对象的属性以修改 flexslider 选项。之后，您几乎可以随时随地更改附加到滑块的任何属性。flexsliderwindowstartvars

完整（示例）代码如下：

// 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;
    }
});

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

于 2014-09-15T11:19:04.850 回答
2

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

于 2013-09-29T17:18:11.950 回答
1

虽然这是未经测试的，但我确实在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

至于您的代码，第二次点击不会像Jakub Michálek在评论中提到的那样工作，它已经初始化 - 您必须通过大多数插件/程序员通常使用的属性重新调整它，只要他们的变量可以以某种方式公开调整=）

于 2013-09-29T17:52:04.263 回答
1

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

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

现在您可以在声明后操作这些东西：

$(window).resize(function() {
    flexslider.vars.animation = 'fade';
)};
于 2016-08-05T15:02:46.823 回答