javascript - 响应式网站上的超宽图像 slider

Question

我正在创建一个响应式网站，我想使用一个非常宽的图像 slider (我相信你已经看到了这种东西)。

例如，我希望主站点的最大宽度为 1,200 像素并使用可变宽度。例如，我希望图像 slider 的宽度为 2,000 像素。在静态站点上，这相对简单，因为我可以简单地为图像 slider 提供 -400 像素的负左边距以使其居中。遗憾的是，在响应式站点的情况下，这是不可能的，因为偏移量需要是可变的。

我确实遇到了一些使偏移流畅的脚本，但这只在屏幕宽度大于网站宽度(即主要内容区域的最大宽度)时有效。当窗口变得比这个最大宽度窄时，脚本无法使图像 slider 居中。

有什么想法可以让图像 slider 在窗口中水平居中，无论用户窗口是宽还是窄？

<script type="text/javascript">
    function setMargins() {
        width = $(window).width();
        containerWidth = $("#flexslider_width").width();  
        leftMargin = (containerWidth-width)/2;    
        $("#flexslider_width").css("marginLeft", -leftMargin);    
    }
    $(document).ready(function() {
        setMargins();
        $(window).resize(function() {
            setMargins();    
        });
    });
</script>

提前感谢您的任何想法，

汤姆

Answer 1

编辑:我现在明白了。试试这个:http://codepen.io/anon/pen/azoRwo

.outer{
  position: relative;
  width: 100%;
  height: 100px;
  border: 2px solid red;
  overflow: hidden;
}
.image {
  position: absolute;
  left: 50%; /* Move to the middle of the parent */
  margin-right: -50%; /* Remove that extra width */
  transform: translate(-50%, 0); /* Move left again; No IE8 support*/
  width: 1000px;
  height: 96px;
  border: 2px solid cyan; /* Just useful for debugging */
  background: url('http://i.imgur.com/rBkbXS3.jpg');
  overflow: hidden;
}

基本上我们先向右移动，然后向左移动，使用父级宽度的百分比。如果您想在 IE8 中获得相同的功能，则必须使用 JavaScript。

引用:http://www.w3.org/Style/Examples/007/center.en.html