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.