如何根据用户的浏览器宽度动态居中easySlider幻灯片？

Question

以下是与我的问题相关的代码：http://jsfiddle.net/mkerny45/V23NK/

正如您所看到的，图像幻灯片有一个很长的水平链。我希望这样，当页面最初加载时以及用户调整浏览器大小时，其中一张幻灯片始终位于用户页面的中心。

此网站说明了我感兴趣的功能：http://www.freundevonfreunden.com/

Answer 1

我认为最好的方法是在幻灯片的容器上使用position: absolute或padding-left，并使用browser_width - image_width / 2以像素为单位计算左侧位置。

以下是代码示例：

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);
});