20

要素の外側から制御したい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
4

6 に答える 6

43

次のようにスライダーオブジェクトにアクセスできます。

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）

于 2012-10-17T11:17:50.040 に答える
14

Flexsliderの最新（2.1）バージョンでは、次のように外部APIを利用できます。

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

APIの詳細については、https：//github.com/woothemes/FlexSlider#updatesをご覧ください。

于 2012-08-09T15:52:50.723 に答える
3

これは私のために働いた：

    $('#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');
            });
        }
    });
于 2014-04-17T19:26:03.297 に答える
2

まだ誰も主な質問に答えていません。アニメーションなしで特定のスライドのライトボックスでフレックススライダーを開始し、後でスライド間にアニメーションを作成する方法です。私はこのような問題を解決しました：

ライトボックスを開く前に（ライトボックスコールバックを使用して）、flexsliderのアニメーション速度を0に設定しました。

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

ライトボックスを開いた後（ライトボックスコールバックを使用）、flexsliderインデックスを変更し、アニメーション速度の以前の値を返します。

self.$slider.flexslider(this.index);
self.$slider.data('flexslider').vars.animationSpeed = 600;
于 2014-10-31T00:04:10.437 に答える
1

最初にスライダーオブジェクトを設定してみてください。

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

次に、flexsliderのパブリックメソッドを使用します。

$slider.data('flexslider').pause();
$slider.data('flexslider').play();
于 2017-06-07T07:19:49.203 に答える
0 
var myslider = ('.flexslider').flexslider({
   animation: 'slide',
   animationLoop: false
});
myslider.flexslider(3);

それは私にとってはうまくいきます。別の形式で使用していますが。

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

データベースから読み込んでいるスライドがたくさんあります。

于 2015-10-07T13:30:20.937 に答える