javascript - bootstrap - flexslider github

Controlar Flexslider desde el elemento exterior.

Question

Tengo un Flexislider que me gustaría controlar desde fuera del elemento. Intenté esto:

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

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

Pero eso devuelve TypeError: Object [object Object] has no method ''flexAnimate''

Luego me topé con este hilo (https://github.com/woothemes/FlexSlider/issues/125) que indica que este es el método correcto:

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

Sin embargo no veo cómo puedo especificar la velocidad de la animación. Quiero que el cambio sea instantáneo solo para ese evento.

Supongo que me pregunto cómo se accede a la API del control deslizante como se menciona en los documentos desde fuera del elemento del control deslizante

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

Answer 1

Con la última versión (2.1) de Flexslider, puede utilizar la API externa así:

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

Los detalles completos sobre la API se encuentran en https://github.com/woothemes/FlexSlider#updates

Answer 2

Este me funcionó:

    $(''#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'');
            });
        }
    });

Answer 3

Nadie ha respondido a la pregunta principal todavía: cómo iniciar flexslider en lightbox en una diapositiva específica sin animación, pero luego tener animación entre diapositivas. He resuelto ese problema así:

Antes de abrir lightbox (usando lightbox callback) establezco la velocidad de animación de flexslider en 0:

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

Después de abrir lightbox (usando lightbox callback) cambio el índice flexslider y devuelvo el valor anterior de la velocidad de animación:

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

Answer 4

Puede acceder al objeto deslizante de esta manera:

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

Como se mencionó anteriormente, puede encontrar esto en la descripción de la API en https://github.com/woothemes/FlexSlider (línea en la fuente: https://github.com/woothemes/FlexSlider/blob/master/jquery.flexslider.js#L674 )

Answer 5

Puedes intentar configurar el objeto deslizante primero:

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

A continuación, utilice los métodos públicos de flexslider:

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

Answer 6

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

Eso funciona para mí. aunque lo uso en un formato diferente.

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

Tengo tantas diapositivas que estoy cargando desde la base de datos.