Customizing WP FlexSlider plugin - removing prev/next side panels

Question

I’m wondering if there is a way to either a) reduce the width of the prev/next sides of the slider or b) remove these two panels entirely but keep the arrows in place to cycle through the slides? (These elements seem to be ul.flex-direction-nav.)

I've tried ul.flex-direction-nav { display:none; } to no avail.

Slider can be viewed as used in this theme - http://themeforest.net/item/serene-magazine-wordpress-theme/5663537

Answer 1

the styles it is using are more specific than the ones you're trying to override them with.

To remove completely:

#featured-slider .flex-direction-nav { display:none; }

then you'll need to remove the padding from #featured-slider:

#featured-slider { padding:none; }

if you're testing in firebug you will need to scroll once you add these styles for the plugin's jquery to show the adjustments correctly.

---

To re-size:

you need to adjust the width of the next/prev slides, the width of the link, the positioning of the arrows, and the positioning of the circles around the arrows. example of 100px wide:

<!-- next/prev slide width -->
#featured-slider { padding-left:100px; padding-right:100px; }

<!-- link width -->
#featured-slider .flex-direction-nav a { width:100px; }

<!-- circle position -->
#featured-slider .flex-direction-nav a:after { left:30px; }

<!-- arrow position -->
#featured-slider .flex-direction-nav a:before { left:36px; }

hope that helps.

Answer 2

Flexslider actually already has default settings to control wether navigation is displayed or not. In your JS, where you call flexslider, try something like:

$('.your-flex-element').flexslider({
 controlNav: false;
 directionNav: false;
});