Move Flexslider navigation buttons to outside

Question

Is there a setting to move both prev and next navigation buttons outside of flexslider, and always visible?

Those buttons used to be located outside; somehow new release has changed the layout.

I found an old question flexslider - controling div outside of slider. I would like to find out this is the only option I have before implementing it.

Thanks!

Wesleywesleyan

Answer 1

Here is the solution I found. It works for FlexSlider v2.1.

It basically moved the navigation buttons outside of the slider image.

.flex-direction-nav .flex-next { right: 0 !important; margin-right: -30px; 
   opacity: 1 !important; }

.flex-direction-nav .flex-prev { left: 0 !important; opacity: 1 !important; 
   margin-left: -30px; }

.flexslider { width: 90%; margin: 0 auto; }

Credit to box86rowh.

Wesleywesleyan

Answer 2

Why not just use css to position them? Find out their class or id, and then set the left and or right position with css to move them to the desired location.

Heartless

It is a little bit more than regular CSS, because those buttons only slides in when mouse hovers on a picture - which I can't figure out. – Wesleywesleyan

Probably your best bet is to hide the default controls and roll your own. – Heartless

+1 I figure it out; the trick is opacity. I posted my answer for others. Thank you for the tip! – Wesleywesleyan