web-dev-qa-db-fra.com

Contrôle Flexslider depuis l’élément extérieur.

J'ai un Flexislider que je voudrais contrôler de l'extérieur de l'élément. J'ai essayé ceci:

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

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

Mais cela retourne TypeError: Object [object Object] has no method 'flexAnimate'

Ensuite, je suis tombé sur ce fil (https://github.com/woothemes/FlexSlider/issues/125) qui indique que c'est la bonne méthode:

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

Cependant, je ne vois pas comment je peux spécifier la vitesse de l'animation. Je veux que le changement soit instantané pour cet événement uniquement.

Je suppose que je me demande comment on accède à l'API du curseur comme mentionné dans la documentation depuis l'extérieur de l'élément du curseur

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

Vous pouvez accéder à l'objet curseur comme ceci:

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

Comme mentionné ci-dessus, vous pouvez le trouver dans la description de l'API à l'adresse suivante: https://github.com/woothemes/FlexSlider (source: https://github.com/woothemes/FlexSlider/blob/master/ jquery.flexslider.js # L674 )

42
driechel

Avec la dernière version (2.1) de Flexslider, vous pouvez utiliser l’API externe comme ceci:

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

Tous les détails sur l’API sont à https://github.com/woothemes/FlexSlider#updates

14
atomicjeep

Celui-ci a fonctionné pour moi:

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

Personne n'a encore répondu à la question principale: comment démarrer flexslider dans une lightbox sur une diapositive spécifique sans animation, mais avoir ensuite une animation entre les diapositives. J'ai résolu ce problème comme ceci:

Avant d'ouvrir la lightbox (à l'aide du rappel de la lightbox), je règle la vitesse d'animation de flexslider sur 0:

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

Après avoir ouvert la lightbox (en utilisant le rappel de la lightbox), je change l'index flexslider et renvoie la valeur précédente de la vitesse d'animation:

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

Vous pouvez commencer par définir l’objet curseur:

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

puis utilisez les méthodes publiques de flexslider:

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

Cela fonctionne pour moi. bien que je l'utilise dans un format différent.

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

j'ai tellement de diapositives que je charge de la base de données. 

0
stephen Tamuno-opubo