Search code examples
jquerycsswordpresspluginsflexslider

Customizing WP FlexSlider plugin - removing prev/next side panels

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

Solution

  • 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.