Flexslider resumes slide show

Question

I would like to configure flexslider so that it starts / resumes auto slideshows on mouseover and pauses it on the mouse. Exactly after normal behavior .: D

So, I have this problem: TypeError: 'undefined' is not a function (rating is "slider.resume ()") and an Internet search returned no results.

My script:

$( 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(); }); }, }); 

});

Useful pointer to the right direction.

Luke

* update ... I found a solution that works ... If someone wants to know 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(); }); } 

Luke

Answer 1

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

Answer 2

This actually 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(); }); } 

This prevents the function from being repeatedly triggered and allows you to go to the next slide directly without the initial delay of the play () function.

Answer 3

For future use, you do not need to add your own functions to the slider settings. You can add something like this if you want to pause the slider while hovering over any element on the page:

 $hoveredElement.on('focusin', function() { $slider.slick('slickPause'); }); 

Or resume auto play when it hangs:

 $hoveredElement.on('focusin', function() { $slider.slick('slickPlay'); }); 

All of which suggest that you first declared your $slider settings!