Flexslider is not adding the 'flexslider' class to the parent div causing navigation arrows to fail

[Neograph734]

At the moment there are a lot of people struggling to get the navigation arrows to appear:

http://stackoverflow.com/questions/22320411/flexslider-direction-navigation-is-not-showing and http://stackoverflow.com/questions/16260738/flex-slider-2-navigation-buttons-not-showing are just some examples.

The suggestion everyone is giving, is to change the opacity for .flex-direction-nav a (line 123 of the css). This works, but is less pretty and does not solve the problem that flexslider should work out of the box.

When looking at the demo page , we can see the navigation arrows slide in as soon as we hover the slider. On most custom setups this does not work because of the css:

.flexslider:hover .flex-direction-nav .flex-prev {
  opacity: 0.7;
  left: 10px;
}
.flexslider:hover .flex-direction-nav .flex-prev:hover {
  opacity: 1;
}
.flexslider:hover .flex-direction-nav .flex-next {
  opacity: 0.7;
  right: 10px;
}
.flexslider:hover .flex-direction-nav .flex-next:hover {
  opacity: 1;
}

It is assumed there is a .flexslider parent class (and it is in the demo's HTML code), but the JavaScript does not add it if it is not found. So if someone attempts to apply the flexslider to another class eg.

// Can also be used with $(document).ready()
$(window).load(function() {
  $('.my-flexslider').flexslider({
    animation: "slide"
  });
});

It simply does not work because the css does not apply.

Suggested solution; make sure the JavaScript always appends the flexslider class to the container element when it is not there already.