全角图像滑块答案

【问题标题】：Fullwidth image slider全角图像滑块
【发布时间】：2014-10-02 17:05:52
【问题描述】：

我的页面有一个 1000px 的容器，用于存放标题（在下图中的红色框上方）和内容（在所附图片中的红色框下方）。这些容器是固定宽度的。但我需要设置一个图像滑块，以全宽显示图像。

我的意思是，我将包含一个更广泛的图像。比如说，1800x200 像素。因此，如果用户的屏幕分辨率（宽度）小于或等于 1000 像素，则将显示图像的中间部分，并且图像滑块的大小应为 1000x200 像素（调整大小）。但是如果说用户的屏幕分辨率是 1300（宽度），那么应该调整图像滑块的大小以显示图像的中心部分，并且滑块容器的大小将是 1300x200 像素！

由于已经有很多 jQuery 插件可用，我想不要重新发明轮子。所以尝试了很多jquery滑块。但他们似乎都没有满足我的上述需求。还是我在尝试过的那些滑块中遗漏了一些设置？

有什么建议吗？

【问题讨论】：

长话短说。您在滑块之前关闭容器并在滑块之后重新打开它。或者你将不得不使用 js 来计算宽度和间距，所以你可以移动带有负边距的滑块或类似的东西。但最干净的方法是关闭容器并重新打开它。
它们是三个独立的容器。第一个和最后一个设置为固定宽度 1000 像素，并将边距设置为 margin: 0 auto; 以在屏幕中居中。我的问题只是滑块！

标签： javascript jquery css image slider

【解决方案1】：

也许添加一个额外的外部容器？然后将 1000px 容器置于外部容器的中心。然后，当您调整窗口大小时，图像滑块将响应外部容器，内部容器保持居中。

outerContainer {
    width: 100%;
    .....
}

innerContainer {
    width: 1000px;
    margin: auto; /*or left:50% right:50%*/
}

【讨论】：

【解决方案2】：

您必须将所有 div 包装在 .wraper div 中并定义宽度 100%。

 .wrapper{width:100%;}

在内部 div 中，您必须使用

定义部分

 .inner(width: 1000px;)

在需要 100% 滑块的地方不要使用这个 .inner 类。

这对你有帮助。

【讨论】：