web-dev-qa-db-de.com

Steuere den Flexslider von außerhalb.

Ich habe einen Flexislider, den ich von außerhalb des Elements steuern möchte. Ich habe das versucht:

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

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

Aber das gibt TypeError: Object [object Object] has no method 'flexAnimate' zurück

Dann bin ich auf diesen Thread gestoßen (https://github.com/woothemes/FlexSlider/issues/125), der darauf hinweist, dass dies die richtige Methode ist:

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

Ich sehe jedoch nicht, wie ich die Geschwindigkeit der Animation festlegen kann. Ich möchte, dass die Änderung nur für dieses Ereignis sofort erfolgt.

Ich denke, ich frage mich, wie man von außen auf das Slider-API zugreift, wie es in den Dokumenten erwähnt wird

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
javascriptjqueryapiflexslider
19
Sebastien

Sie können auf das Objekt des Schiebereglers wie folgt zugreifen:

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

Wie oben erwähnt, finden Sie dies in der API-Beschreibung unter https://github.com/woothemes/FlexSlider (Zeile in Quelle: https://github.com/woothemes/FlexSlider/blob/master/ jquery.flexslider.js # L674 )

42
driechel

Mit der neuesten (2.1) Version von Flexslider können Sie die externe API wie folgt verwenden:

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

Vollständige Details zur API finden Sie unter https://github.com/woothemes/FlexSlider#updates

14
atomicjeep

Dieser hat für mich gearbeitet:

    $('#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');
            });
        }
    });
3
Joe L.

Bisher hat noch niemand die Hauptfrage beantwortet: Wie man den Flexslider in der Lightbox auf einer bestimmten Folie ohne Animation startet, aber später eine Animation zwischen den Folien hat. Ich habe dieses Problem so gelöst:

Vor dem Öffnen von Lightbox (mittels Lightbox-Rückruf) stelle ich die Animationsgeschwindigkeit von flexslider auf 0 ein:

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

Nach dem Öffnen von Lightbox (mit Lightbox-Rückruf) ändere ich den Flexslider-Index und gebe den vorherigen Wert der Animationsgeschwindigkeit zurück:

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

Sie können zunächst versuchen, das Schiebereglerobjekt einzustellen:

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

verwenden Sie dann die öffentlichen Methoden von flexslider:

$slider.data('flexslider').pause();
$slider.data('flexslider').play();
1
benbyford
var myslider = ('.flexslider').flexslider({
   animation: 'slide',
   animationLoop: false
});
myslider.flexslider(3);

Diese Arbeit für mich. obwohl ich es in einem anderen Format verwende.

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

ich habe so viele Folien, die aus der Datenbank geladen werden. 

0
stephen Tamuno-opubo