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();                      

            });

        }

    });

});