Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flexslider resume slideshow on mouseover

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

like image 741
Luka Mis Avatar asked Jun 17 '13 18:06

Luka Mis


1 Answers

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();
        });
  }
like image 71
Luka Mis Avatar answered Sep 22 '22 16:09

Luka Mis