Javascript 从外部元素控制 Flexslider。

Control Flexslider from outside element.

提问by Sebastien

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

我有一个 Flexislider，我想从元素外部控制它。我试过这个：

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'

但那返回 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:

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

$('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

我想我想知道如何从滑块元素外部访问文档中提到的滑块 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

回答by driechel

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)

如上所述，您可以在https://github.com/woothemes/FlexSlider的 API 描述中找到它（源代码中的行：https: //github.com/woothemes/FlexSlider/blob/master/jquery.flexslider.js# L674)

回答by atomicjeep

With the latest (2.1) version of Flexslider you can utilise the external api like so:

使用最新的 (2.1) 版本的 Flexslider，您可以像这样使用外部 api：

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

Full details on the API are at https://github.com/woothemes/FlexSlider#updates

API 的完整详细信息位于https://github.com/woothemes/FlexSlider#updates

回答by Joe L.

This one worked for me:

这个对我有用：

    $('#slider').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        start: function(){
            $('#sliderNext').on('click', function(e){
                $('.flex-next').trigger('click');
            });
            $('#sliderPrev').on('click', function(e){
                $('.flex-prev').trigger('click');
            });
        }
    });

回答by Yuriy

Nobody has answered the main question yet: how to start flexslider in lightbox on a specific slide without animation, but then later have animation between slides. I've solved that problem like this:

还没有人回答主要问题：如何在没有动画的特定幻灯片上的灯箱中启动 flexslider，但后来在幻灯片之间有动画。我已经解决了这个问题：

Before opening lightbox (using lightbox callback) I set animation speed of flexslider to 0:

在打开灯箱（使用灯箱回调）之前，我将 flexslider 的动画速度设置为 0：

self.$slider.data('flexslider').vars.animationSpeed = 0;

After opening lightbox (using lightbox callback) I change flexslider index and return previous value of animation speed:

打开灯箱（使用灯箱回调）后，我更改了 flexslider 索引并返回动画速度的先前值：

self.$slider.flexslider(this.index);
self.$slider.data('flexslider').vars.animationSpeed = 600; 

回答by benbyford

You can try setting the slider object first:

您可以先尝试设置滑块对象：

$slider = $('.slideshow').flexslider();

then use flexslider's public methods:

然后使用 flexslider 的公共方法：

$slider.data('flexslider').pause();
$slider.data('flexslider').play();

回答by stephen Tamuno-opubo

var myslider = ('.flexslider').flexslider({
   animation: 'slide',
   animationLoop: false
});
myslider.flexslider(3);

That work for me. though i use it in a different format.

那对我有用。尽管我以不同的格式使用它。

var img = $('<span/>');
img.attr('onclick','myslider.flexslider('+ id + ');');

i have so many slides that am loading from database.

我有很多从数据库加载的幻灯片。