How do I dynamically center an easySlider slide depending on user's browser width?

Question

Here is the code relevant to my question: http://jsfiddle.net/mkerny45/V23NK/

As you can see there are a long horizontal chain of image slides. I would like it so that one of the slides is always at the center of the user's page both when the page initially loads and when the user resizes their browser.

This site illustrates the functionality I am interested in: http://www.freundevonfreunden.com/

Answer 1

I think the best way to do this is to use position: absolute or padding-left on the container of your slides and calculate the left position in pixels with browser_width - image_width / 2.

Here is an exemple of code :

var image_width = 940; //You can also get it dynamically

$(document).ready(function() {        
    $('#slider').css('padding-left', ($(window).width() - image_width) / 2);
});

$(window).resize(function() {
    $('#slider').css('padding-left', ($(window).width() - image_width) / 2);
});