Control Flexslider desde el elemento exterior.

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 tropecé con este hilo (https://github.com/woothemes/FlexSlider/issues/125) que indica que este es el método adecuado:

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

Sin embargo, no veo cómo puedo especificar la velocidad de la animation. 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 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 

Puede acceder al object 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 fuente: https://github.com/woothemes/FlexSlider/blob/master/jquery.flexslider.js# L674 )

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

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

Los detalles completos sobre la API están en https://github.com/woothemes/FlexSlider#updates

Este trabajó para mí:

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

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

Antes de abrir lightbox (usando la callback de la caja de luz) ajusto la velocidad de animation de flexslider a 0:

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

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

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

Puedes intentar configurar primero el object deslizante:

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

luego usa los methods públicos de flexslider:

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

Eso funciona para mi aunque lo uso en un formatting diferente.

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

Tengo tantas diapositivas que estoy cargando desde la database.