javascript - 如何根据用户的浏览器宽度动态居中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);
});