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>

Zel

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!

Donnelly

Just did this. Works Great! Amazing that they have not updated this yet. – Damara

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.

Swift

Answer 3

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

You can simple use the code directly

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

Perfection

Not too sure what you mean – Zel

Im pretty sure you have to define the navigation container. It seems that way from all the examples. It applyies an active class to the first link in the nav so it knows whats supposed to be happening but when clicked nothing happens. – Zel

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.

Leucoma

Answer 5

I am using version 2.7.2 and what I did is I commented everything inside the onTouchMove = function(e) {}

After that, everything is still working fine and the most important part is that the error message was gone.

Selfliquidating