Search code examples
jqueryflexslider

Controlling flexslider by hover

I've been working on an idea to control a slider by means of hover. I found a few posts on it, but I havent been able to find a full solution. I'm not a jQuery expert, but I've given it a go, I'm having a few errors and it isnt quite working.

I'm using the flexslider plugin.

The URL is mjtweaverdev.com.

The code I'm using is below...

jQuery(window).load(function() {
  jQuery(".flexslider li").hover(function() {
    var slideNumber = jQuery(this).attr('data-slide-to');
    console.log(slideNumber);
    jQuery('.flexslider li').flexslider('finish');
    jQuery('.flexslider').flexslider("pause");
    jQuery('.flexslider').flexslider(slideNumber);
  },
  function() {
    jQuery('.flexslider').flexslider('play');
  }
);

});

Solution

  • Why not simply trigger the click event on the li when hovered?

    Demo: http://jsfiddle.net/lotusgodkk/n9JUc/48/

    JS:

    $('.flex-control-nav li a').on('mouseover',function(){
    $(this).trigger('click');
});