本文介绍了从外部因素控制Flexslider。的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有,我想从外面的元素来控制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的描述找到这个在(源行:的)

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。的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-29 00:12