从外部因素控制Flexslider。 [英] Control Flexslider from outside element.

问题描述

我有，我想从外面的元素来控制Flexislider。我想这样的：

  VAR myslider = $（'滑'）。flexslider（{
    动画：幻灯片
}）;$（'按钮'）。点击（函数（）{
    myslider.flexAnimate（3）//功能：移动滑块 - （目标，暂停）参数
}）;
 

但是，返回类型错误：对象的翻译：没有方法'flexAnimate

然后，我偶然发现了这个线程（https://github.com/woothemes/FlexSlider/issues/125），它表示这是正确的方式：

  $（'按钮'）。点击（函数（）{
    myslider.flexslider（3）
}）;
 

不过，我不明白我怎么可以指定动画的速度。我想变化是瞬间该事件只。

我想我不知道从滑动元件外面的文档提到了一个如何访问滑块API

  //滑块对象：滑块元素本身
slider.container //对象：滑块内的ul.slides
slider.slides //对象：滑块的幻灯片
slider.count // INT：幻灯片在滑块总数
slider.currentSlide //诠释：目前正在显示的幻灯片
slider.animatingTo //诠释：有用的。之前（）中，滑动当前动画来
slider.animating //布尔：是滑盖动画？
slider.atEnd //布尔：在两端的滑块？
slider.manualPause //布尔：力滑块pauseOnHover活动期间保持暂停
slider.controlNav //对象：滑块controlNav
slider.directionNav //对象：滑块directionNav
slider.controlsContainer //对象：滑块的controlsContainer元素
slider.manualControls //对象：滑块的manualControls元素
slider.flexAnimate（目标）//功能：移动滑块 - （目标，暂停）参数
slider.pause（）//功能：暂停滑块幻灯片放映间隔
slider.resume（）//功能：恢复滑块幻灯片放映间隔
slider.canAdvance（目标）//函数：返回Boolean如果滑块可以提前 - （目标）参数
slider.getTarget（DIR）//功能：获取目标发出的指示 - 下一步或preV参数
 

解决方案

您可以访问滑块对象是这样的：

  VAR exampleSlider = $（'＃滑盖）的数据（flexslider'）。
//现在你可以访问所有例如flexAnimate方法
exampleSlider.flexAnimate（..）;
 

正如上面提到的，你可以在API的描述找到这个在 https://github.com/woothemes/FlexSlider （源行：的https://github.com/woothemes/FlexSlider/blob/master/jquery.flexslider.js#L674)

I have a Flexislider that I would like to control from outside the element. I tried this:

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

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

But that returns TypeError: Object [object Object] has no method 'flexAnimate'

Then I stumbled upon this thread (https://github.com/woothemes/FlexSlider/issues/125) which indicates this is the proper method:

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

However I don't see how I can specify the speed of the animation. I want the change to be instant for that event only.

I guess I'm wondering how one accesses the slider API as mentioned in the docs from outside the slider element

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

解决方案

You can access the slider object like this:

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

As mentioned above you can find this in the API description at https://github.com/woothemes/FlexSlider (line in source: https://github.com/woothemes/FlexSlider/blob/master/jquery.flexslider.js#L674)

这篇关于从外部因素控制Flexslider。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！