Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flexslider manualControls not working

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>
like image 202
Paul Elliot Avatar asked Mar 06 '13 12:03

Paul Elliot


2 Answers

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!

like image 149
Andrew White Avatar answered Oct 21 '22 08:10

Andrew White


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.

like image 2
phyatt Avatar answered Oct 21 '22 08:10

phyatt