Control Flexslider from outside element.

Question

I have a Flexislider that I would like to control from outside the element. I tried this:

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

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

But that returns TypeError: Object [object Object] has no method 'flexAnimate'

Then I stumbled upon this thread (https://github.com/woothemes/FlexSlider/issues/125) which indicates this is the proper method:

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

However I don't see how I can specify the speed of the animation. I want the change to be instant for that event only.

I guess I'm wondering how one accesses the slider API as mentioned in the docs from outside the slider element

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

Mccarter

Answer 1

You can access the slider object like this:

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

As mentioned above you can find this in the API description at https://github.com/woothemes/FlexSlider (line in source: https://github.com/woothemes/FlexSlider/blob/master/jquery.flexslider.js#L674)

Compline

where is the documentation for flexAnimate ? I can't seem to find that in the github repo – Jeffry

Answer 2

With the latest (2.1) version of Flexslider you can utilise the external api like so:

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

Full details on the API are at https://github.com/woothemes/FlexSlider#updates

Claudication

Yes. That works but I want the change to be instant (no slide transition). I'm using this function to launch the slider in a lightbox and the user is clicking on a tumbnail of the image so when the lightbox opens, I dont want the slider to be in mid transition. However, when I'm navigating in the slider, I want the transition effect. Is this possible? – Mccarter

Answer 3

This one worked for me:

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

Klipspringer

Answer 4

Nobody has answered the main question yet: how to start flexslider in lightbox on a specific slide without animation, but then later have animation between slides. I've solved that problem like this:

Before opening lightbox (using lightbox callback) I set animation speed of flexslider to 0:

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

After opening lightbox (using lightbox callback) I change flexslider index and return previous value of animation speed:

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

Sleuthhound

Yuriy, hi! I am trying to do as you said. But after switching to another slide my image dissapears. And only moving to the previous slide brings the image back. Any ideas? Maybe you can share some example code? Much appreciate! Alexandr Solovyov – Ceiba

Could you post an example?? – Gynaecocracy

Here is the example gist: gist.github.com/Walkeryr/abc5498fe1866032c16b. I've implemented it here: cosmoscow.com/press/photo/auction – Sleuthhound

Yuriy, thanks! It helped a lot! A little comment. To make this code working with slide flexslider animation you shoud add $(window).trigger('resize'); before changing slide. – Ceiba

Answer 5

You can try setting the slider object first:

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

then use flexslider's public methods:

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

Flocky

Answer 6

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

That work for me. though i use it in a different format.

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

i have so many slides that am loading from database.

Becka