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.

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!

score 12 · Accepted Answer · answered Apr 09 '13 at 17:22

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.

score 3 · Answer 2 · answered Apr 04 '13 at 18:54

3

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.

answered Apr 04 '13 at 18:54

box86rowh

3,415
2
26
37

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. – Win Apr 04 '13 at 19:00
1

Probably your best bet is to hide the default controls and roll your own. – box86rowh Apr 04 '13 at 20:36
1

+1 I figure it out; the trick is opacity. I posted my answer for others. Thank you for the tip! – Win Apr 09 '13 at 17:24

Move Flexslider navigation buttons to outside

2 Answers2