How to make image-slider full width of page? Need alternative to absolute positioning?

Question

I have this Slider on my website: officesincambridge.co.uk

I want the slider to go the full width of the page and I've successfully managed this by making the div (in which the slider is wrapped in):

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

This works as seen below:

However, I am then forced to add margin to the elements below to stop them going beneath the absolute slider (I've tried both % margin and px. Which works fine, on full screen, but then if I minimize browser to for example, a phone screen, the content starts to overlap. I'm not sure how to get by this problem, I could just add more margin but then that impacts the full-screen appearance.

Am I missing a trick here or is there some other solution? Thanks!

Answer 1

Just to make a complete answer: First of all, you could exclude your slider from the container-class (.wrapper). Close it before your slider and open it afterwards. Then you can give your slider a width 100% which will use the full width.

Second chance is, to use a placeholder class and javascript. After your slider (with absolute position) add another div which will be a placeholder for the slider. This should be just as high as your slider. With javascript you can set the height from your slider to the placeholder.

The first solution is way easier though.