Move Flexslider navigation buttons to outside

jquery flexslider
Win picture Win · Apr 4, 2013 · Viewed 10.7k times · Source

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.

enter image description here

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!

Answer

Win picture Win · Apr 9, 2013

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.

Related questions

Flexslider - different slideshow speed on each slide

I'm using Flexslider and have been asked to display each slide at a different time depending on how much content it has, so fast for a short sentence and slow for a paragraph. How can I set this up when …

Read More
Control Flexslider from outside element.

I have a Flexislider that I would like to control from outside the element. I tried this: var myslider = $('.slider').flexslider({ animation: 'slide' }); $('button').click(function () { myslider.flexAnimate(3)    //Function: Move slider - (target, pause) parameters }); But that returns TypeError: …

Read More
Flexslider slow image load

I am using Flexslider on a website I'm building. I like the responsiveness very much and thats the reason I don't wan't to change to nivo-slider or something similar. The negative about it is that it doesn't display the first …

Read More