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

  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.

  • Flexslider resume slideshow on mouseover
  • How to show the next slide when you click on the image in flexslider
  • Foundation + Flexslider with Thumbnails not working
  • AngularJS only shows last Element in ng-repeat
  • Dart when using JQuery plugin for slider doesn't work as JavaScript did
  • Is it possible to use JWplayer within the Flexslider (JQuery) plugin?
  • $(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();                      
                });
            }
        });
    });
    

  • flexslider not showing the first image loaded from wordpress site
  • AngularJS only shows last Element in ng-repeat
  • How to hide images until AFTER jquery flexslider finishes loading
  • How to show the next slide when you click on the image in flexslider
  • Flexslider infinite loop
  • Change data-src to src via jquery
  • 2 Solutions collect form web for “Howto: Pause and Play flexslider based on click event (jQuery)”

    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.)

    Try:

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