从外部元素控制Flexslider.

Question

我有一个我希望从元素外部控制的Flexislider.我试过这个:

var myslider = $('.slider').flexslider({
    animation: 'slide'
});

$('button').click(function () {
    myslider.flexAnimate(3)    //Function: Move slider - (target, pause) parameters
});

但那会回来 TypeError: Object [object Object] has no method 'flexAnimate'

然后我偶然发现了这个线程(https://github.com/woothemes/FlexSlider/issues/125),这表明这是正确的方法:

$('button').click(function () {
    myslider.flexslider(3)
});

但是我看不出如何指定动画的速度.我希望改变只对该事件立即进行.

我想我想知道如何从滑块元素外部访问文档中提到的滑块API

slider                        //Object: The slider element itself
slider.container              //Object: The ul.slides within the slider
slider.slides                 //Object: The slides of the slider
slider.count                  //Int: The total number of slides in the slider
slider.currentSlide           //Int: The slide currently being shown
slider.animatingTo            //Int: Useful in .before(), the slide currently animating to
slider.animating              //Boolean: is slider animating?
slider.atEnd                  //Boolean: is the slider at either end?
slider.manualPause            //Boolean: force slider to stay paused during pauseOnHover event
slider.controlNav             //Object: The slider controlNav
slider.directionNav           //Object: The slider directionNav
slider.controlsContainer      //Object: The controlsContainer element of the slider
slider.manualControls         //Object: The manualControls element of the slider
slider.flexAnimate(target)    //Function: Move slider - (target, pause) parameters
slider.pause()                //Function: Pause slider slideshow interval
slider.resume()               //Function: Resume slider slideshow interval
slider.canAdvance(target)     //Function: returns boolean if slider can advance - (target) parameter
slider.getTarget(dir)         //Function: get target given a direction - "next" or "prev" parameter

Answer 1

您可以像这样访问滑块对象:

var exampleSlider = $('#slider').data('flexslider');
// now you can access all the methods for example flexAnimate
exampleSlider.flexAnimate(..);

如上所述,您可以在https://github.com/woothemes/FlexSlider的API说明中找到这一点(来源:https://github.com/woothemes/FlexSlider/blob/master/jquery.flexslider.js# L674)

Answer 2

使用Flexslider的最新版本(2.1),您可以像这样使用外部API:

$('button').click(function () {
    $('.slider').flexslider(3);
});

有关API的完整详细信息,请访问https://github.com/woothemes/FlexSlider#updates