title: Howto: Pause and Play flexslider based on click event (jQuery)
body: <ol>
  <li>I am trying to bind the <code>slider.pause()</code> and <code>slider.play()</code> events to my buttons (see code below).</li>
  <li>It works <strong>unless I click the play button twice</strong> or I click the play button <strong>while the slider is running</strong>.</li>
  <li>Then it seems to run <strong><em>another</em></strong> instance (or something) as it runs at twice the speed and the pause button no longer stops slider</li>
  </ol>
  
  <p>Question: Is there a way to test whether the slider is running before calling <code>slider.play()</code> or are the pause() and/or play() calls in the wrong place? </p>
  
  <p>Please advise.</p>
  
  <pre><code>$(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();                      
              });
          }
      });
  });
  </code></pre>