Centering Slider Nav Buttons?

Hi. You need 2 two things to solve your problem:
1. Target the last (first in the code) bacon strip with JS to remove its margin-right property;
2. Either:
a. Wrap your controls div with another absolutely positioned div (by editing the HTML output or via JS) and removing absolute positioning from controls so that the margin: 0 auto property kicks in;
b. Leave the markup intact and simply set the controls div left position through JS.
Let me know what you want to do and I’ll give you the code you need to use.
Cheers!

Thanks for the reply.

Either option is fine. Whichever is the easiest for you to post would be greatly appreciated.

Thank you!

Hi. I wrote a little jQuery function that should solve your pb. Here is step-by-step walk-through on how to implement it:

1. Create a file named slider.js inside the folder:

themes/pfr-1.0/scripts

and paste the following code inside:

// Center Slider Controls (bacon strips)
var $j = jQuery.noConflict();
$j(window).load(function() {
	$j('#controls').wrap('<div class="controls-container" />');
	$j('#controls').css('left', ($j('.wrapper').width() - $j('#controls').width())/2).children('a').first().css('margin', '0 auto');
	$j('.controls-container').css({ 'position':'fixed', 'display':'block', 'height':$j('#controls').height(), 'left':$j('#carousel').offset().left, 'top':$j('#controls').offset().top, 'width':$j('#carousel').width() });
	$j('#controls').animate( {'opacity':'1'}, 1000 );
});

2. Open your style.css file, locate this selector:

#controls {

and add this property inside:

opacity: 0;

That will make the slider controls invisible until our function kicks in. The reason why we need this is to hide the fact that the controls will be moving while the page loads (not very elegant).
That should do the trick.

Let me know if works as expected.

Oh, I noticed a couple of things in your code that you should try to fix whenever you get a chance:

1. You are loading three different versions of jQuery. You should only include one version: the latest.
2. You have several validation errors you might want to address.
   Cheers!

Edit: I realized I forgot a major step in the process, which is calling the slider.js file. I gotta step out now but I’ll post again soon with the fix. Sorry about that!

To include the JS script, paste this code in your theme’s functions.php:

function pr_center_slider_controls() {
    wp_register_script('pr-center-slider-controls', get_bloginfo('stylesheet_directory').'/scripts/slider.js', array('jquery'), '1.0', true);
    wp_enqueue_script('pr-center-slider-controls');
}
add_action('wp_enqueue_scripts', 'pr_center_slider_controls');

Emm… Hello?