Howto: Pause and Play flexslider based on click event (jQuery)

Question

1. I am trying to bind the slider.pause() and slider.play() events to my buttons (see code below).
2. It works unless I click the play button twice or I click the play button while the slider is running.
3. Then it seems to run another instance (or something) as it runs at twice the speed and the pause button no longer stops slider

Question: Is there a way to test whether the slider is running before calling slider.play() or are the pause() and/or play() calls in the wrong place?

Please advise.

$(document).ready(function(){
    $('.flexslider').flexslider({
        animation: "fade",
        slideshowSpeed: 2000,
        pauseOnHover: false,
        touch: true,
        controlsContainer: ".fs-container",
        controlNav: true,
        manualControls: ".flex-control-nav li",
        start: function(slider) {
            $('.icon-pause').click(function(){
                slider.pause();
            });

            $('.icon-play').click(function(){
                slider.play();                      
            });
        }
    });
});

Solution 1

7 months old question, but yea the start property on flexslider fires every time an animation starts.

So the code you have above is binding rebinding the click event.

Instead you want something like:

        $('.icon-pause').click(function(){
            $('#your_slider_id').pause();
        });

And you'd put this in your page init functions -- or anywhere, just not inside the flexslider initialization.

(Of course .play() is also a method.)

Solution 2

Try:

$('.flex-slider').flexslider('pause'); and $('.flex-slider').flexslider('play');.

Comments

[marwils]

The other answer is working. See the basic API: flexslider.woothemes.com/video.html

[Kyle Cureau]

@marwils, nice. This answer was written before priyaqb posted. I can't even remember it anymore. Anyone still looking, see priyaqb's answer.