Keeping All Buttons At The Bottom Of The Image Slider

Question

I'm using an image slider on my website. It works well, except the buttons (circular dots) on the bottoms of the slider move down the screen when I resize the webpage.

var counter = 1
setInterval(function() {
  document.getElementById("radio" + counter).checked = true
  counter++
  if (counter > 4) {
    counter = 1
  }
}, 5000)

.slider {
  width: 85%;
  height: 100%;
  border-radius: 10px;
  text-align: center;
  overflow: hidden;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.slides {
  width: 500%;
  display: flex;
}

.slides input {
  display: none;
}

.slide {
  width: 20%;
  transition: 2s;
}

.slide img {
  width: 100%;
  height: 100%;
}

.slide-manual {
  position: absolute;
  width: 100%;
  margin-top: -60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.manual-button {
  border: 2px solid #ffffff;
  padding: 5px;
  border-radius: 10px;
  cursor: pointer;
  transition: 1s;
  margin: 15px;
}

.manual-button:hover {
  background: #ffffff;
}

#radio-button1:checked~.one {
  margin-left: 0;
}

#radio-button2:checked~.one {
  margin-left: -20%;
}

#radio-button3:checked~.one {
  margin-left: -40%;
}

#radio-button4:checked~.one {
  margin-left: -60%;
}

#radio-button5:checked~.one {
  margin-left: -80%;
}

.slide-automatic {
  position: absolute;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  margin-top: 440px;
}

.slide-automatic div {
  border: 2px solid #ffffff;
  padding: 5px;
  border-radius: 10px;
  transition: 1s;
  margin: 15px;
}

#radio-button1:checked~.slide-automatic .auto-button1,
#radio-button2:checked~.slide-automatic .auto-button2,
#radio-button3:checked~.slide-automatic .auto-button3,
#radio-button4:checked~.slide-automatic .auto-button4,
#radio-button5:checked~.slide-automatic .auto-button5 {
  background: #ffffff;
}

<div class="slider">
  <div class="slides">
    <input type="radio" name="radio-button" id="radio-button1" />
    <input type="radio" name="radio-button" id="radio-button2" />
    <input type="radio" name="radio-button" id="radio-button3" />
    <input type="radio" name="radio-button" id="radio-button4" />
    <input type="radio" name="radio-button" id="radio-button5" />
    <div class="slide one">
      <img src="#" />
    </div>
    <div class="slide">
      <img src="#" />
    </div>
    <div class="slide">
      <img src="#" />
    </div>
    <div class="slide-automatic">
      <div class="auto-button1"></div>
      <div class="auto-button2"></div>
      <div class="auto-button3"></div>
      <div class="auto-button4"></div>
      <div class="auto-button5"></div>
    </div>
  </div>
  <div class="slide-manual">
    <label for="radio-button1" class="manual-button"></label>
    <label for="radio-button2" class="manual-button"></label>
    <label for="radio-button3" class="manual-button"></label>
    <label for="radio-button4" class="manual-button"></label>
    <label for="radio-button5" class="manual-button"></label>
  </div>
</div>

I have two sets of buttons that display on my image slider (.slide-manual and .slide-automatic). I've tried adding and changing the heights and widths, and I've also tried changing position: absolute; to position: relative. Neither of these changes has solved the issue.

I'd like these buttons to be overlayed and stuck on the bottom of the image slider whatever the screen size.

Any advice on how I can achieve this would be much appreciated.

Answer 1

I figured out a solution to this problem of trying to keep the buttons (circular dots) on the bottom of the image slider.

I changed this CSS:

.slide-automatic {
  position: absolute;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  margin-top: 440px;
}

to this:

.slide-automatic {
  position: absolute;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  margin-left: 0%;
  margin-right: 0%;
  bottom:0;
  
}

The buttons are now stuck on the bottom of the image slider even when rescaled.