I would like to set up flexslider so it starts/resumes auto slideshow on mouseover and pause it on mouseout. Exactly the oposite of normal behaviour. :D

So i have this issue: TypeError: 'undefined' is not a function (evaluating 'slider.resume()') and searching on internet has not yield any results.

My script is:

    $( document ).ready(function() {
    var $slider = $('.flexslider');

    $slider.flexslider({
    controlNav: false,
    directionNav: false, 
    slideshow: true,
    slideshowSpeed: 500,
    animationSpeed: 300,
    /*randomize: true,*/
    controlsContainer: ".flex-container",
    start: function(slider) {
        slider.pause();
        slider.mouseover(function() {
        slider.resume();
    });
  },
});

});

Any pointer to right direction would be helpful.

Luka

*update... I have found a solution that works... If anybody wants to know is this:

start: function(slider) {
        slider.pause();
        slider.manualPause = true;
        $slider.mouseover(function() {
            slider.manualPause = false;
            slider.play();
        });
        $slider.mouseout(function() {
            slider.manualPause = true;
            slider.pause();
        });
  }

Luka

I would like to set up flexslider so it starts/resumes auto slideshow on mouseover and pause it on mouseout. Exactly the oposite of normal behaviour. :D

So i have this issue: TypeError: 'undefined' is not a function (evaluating 'slider.resume()') and searching on internet has not yield any results.

My script is:

    $( document ).ready(function() {
    var $slider = $('.flexslider');

    $slider.flexslider({
    controlNav: false,
    directionNav: false, 
    slideshow: true,
    slideshowSpeed: 500,
    animationSpeed: 300,
    /*randomize: true,*/
    controlsContainer: ".flex-container",
    start: function(slider) {
        slider.pause();
        slider.mouseover(function() {
        slider.resume();
    });
  },
});

});

Any pointer to right direction would be helpful.

Luka

*update... I have found a solution that works... If anybody wants to know is this:

start: function(slider) {
        slider.pause();
        slider.manualPause = true;
        $slider.mouseover(function() {
            slider.manualPause = false;
            slider.play();
        });
        $slider.mouseout(function() {
            slider.manualPause = true;
            slider.pause();
        });
  }

Luka

• javascript
• jquery
• flexslider

Share Improve this question Follow edited Jun 17, 2013 at 22:32 Luka Mis asked Jun 17, 2013 at 18:47 Luka MisLuka Mis 57311 gold badge77 silver badges1818 bronze badges 2

• Make this as response and flag it as solved to be more readable. Thanks – Mounir Commented Nov 5, 2013 at 12:29
• Done. Tnx for letting me know. – Luka Mis Commented Nov 6, 2013 at 12:49

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

I have found a solution that works:

start: function(slider) {
        slider.pause();
        slider.manualPause = true;
        slider.mouseover(function() {
            slider.manualPause = false;
            slider.play();
        });
        slider.mouseout(function() {
            slider.manualPause = true;
            slider.pause();
        });
  }

Actually this works a little better:

start: function(slider) {
    slider.pause();
    slider.manualPause = true;
    slider.mouseenter(function(){
        slider.flexslider('next');
        slider.play();
        slider.manualPause = false;
    });
    slider.parent().mouseleave(function() {
        slider.manualPause = true;
        slider.pause();
    });
}

It prevents the function firing multiple times and it allows to go to next slide directly without the initial delay of the play() function.

For future reference, you don't have to add your functionality within the slider settings. You can add something like this if you want to pause the slider when hovering over any element on the page:

$hoveredElement.on('focusin', function() {

  $slider.slick('slickPause');

});

Or resume autoplay on hover:

$hoveredElement.on('focusin', function() {

  $slider.slick('slickPlay');

});

All of which is assuming you've declared your $slider settings first!