如何使图像滑块全页宽？需要替代绝对定位？

Question

我的网站上有这个Slider：officesincambridge.co.uk

我想让滑块移动到页面的整个宽度，我已经通过制作div（滑块包含在其中）成功地管理了这个：

.custom-slider {
  position:absolute; //added
  left: 0; //added
  width: 100%;}

这可以如下所示：

然而，我被迫为下面的元素添加边距以阻止它们进入absolute滑块下方（我已经尝试了％margin和px。这在全屏幕上工作正常，但是如果我最小化浏览器，例如手机屏幕，内容开始重叠。我不知道如何解决这个问题，我可以添加更多的边距，但这会影响全屏外观。

我在这里错过了一个技巧还是有其他解决方案？谢谢！

Answer 1

只是为了得到一个完整的答案： 首先，您可以从容器类（.wrapper）中排除滑块。在滑块前关闭它，然后打开它。然后，您可以为滑块指定100％的宽度，这将使用整个宽度。

第二个机会是，使用占位符类和javascript。滑块（具有绝对位置）后添加另一个div，它将成为滑块的占位符。这应该和滑块一样高。使用javascript，您可以设置从滑块到占位符的高度。

第一种解决方案虽然容易。