Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
120
rated 0 times [  122] [ 2]  / answers: 1 / hits: 41166  / 12 Years ago, wed, august 8, 2012, 12:00:00

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

More From » jquery

 Answers
101

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)


[#83768] Tuesday, August 7, 2012, 12 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
trayvon

Total Points: 35
Total Questions: 117
Total Answers: 88

Location: Guernsey
Member since Tue, Jul 6, 2021
3 Years ago
;