Flexslider manualControls not working

Question

I have created a slider with Flexslider and I am trying to use manualControls: to create a navigation menu but the links wont work. Here is code for flexslider and the slider/navigation itself:

Flexslider:

 <script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider({
      controlsContainer: ".slidercontainer",
      controlNav: true,
      manualControls: ".flex-control-nav li",
      }); 
 });
 </script>  

Slider and nav:

    <div class="slidercontainer">
        <div class="flexslider">
            <ul class="slides">
              <li>slide1</li>
              <li>slide2</li>
            </ul>
            <ul class="flex-control-nav">
              <li>1</li>
              <li>2</li>
            </ul>
    </div>          
    </div>

Answer 1

have you fixed this yet? If not, the answer is because FlexSlider still has a live event in the plugin - but jQuery has deprecated this.

To fix it; open up jQuery.flexslider.js and do a find/replace for "live", replacing it with "on". I actually searched ".live(" and replaced with ".on(" just to make sure I only got the event listener. There are 2 occurrences.

That's it. Works perfectly!

Answer 2

https://github.com/woothemes/FlexSlider/issues/351

Sounds like there is a lot going on with it.

I am using Chrome primarily, and I had it happening no matter what on this theme:

http://www.templatemonster.com/demo/42317.html

The version of FlexSlider that it had said: jQuery FlexSlider v1.8

But I found a fix for it:

http://wordpress.org/support/topic/chrome-bug-with-flexslider-plugin

End of the thread, a guy posts a link to another site that he fixed! I've posted the necessary lines below:

Line 34 in jquery.flexslider.js

slider.eventType = ('ontouchstart' in document.documentElement) ? 'touchstart' : 'click';

I replaced it with the following two lines:

slider.touch = (( "ontouchstart" in window ) || ( window.navigator.msPointerEnabled ) || window.DocumentTouch && document instanceof DocumentTouch) && slider.vars.touch;
slider.eventType = "click touchend MSPointerUp";

Hope that helps.

Answer 3

Example link : http://flexslider.woothemes.com/

You can simple use the code directly

$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide"
  });
});

Answer 4

I've just had the same problem, it was due to having touch events enabled in the 'chrome://flags' page of chrome, after turning off touch events the flexslider navigation arrows and dots will work.

There are several places in the code where flexslider tries to account for an iOS bug, but in so doing completely disables click events on touch-capable browsers that aren't iOS.