html - How to create a slide of background images using Pure Javascript or a pure Javascript library

Question

I'd like to make the below in a way that I can have two images slide in the background but have I'm stuck on how to implement a slide of background images. Kindly assist, any assistance will be highly appreciated.

#header-image {
  background-image: url('/images/photography1.jpg');
  width: 100%;
  border: none;
  padding: 0;
  margin: 0;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  position: relative;
}

<div id="header-image">
  <div class="overlay" data-aos="fade-down-right">
    <h1>Photography Logo</h1>
  </div>
</div>

Answer 1

I made an example for you using javascript, as well as modified your html and css. Was such a result necessary? If you have any questions, please let me know.

let anime = document.querySelector('#header-image');
var step = 0;

function animate() {
  if (step > -200) {
      anime.style.transform = 'translateX('+ step +'vw)';
    } else {
      anime.style.transform = 'transformX(100vw)';
      step = 100;
  }
}

setInterval(function () {
   step = step - 100;
   animate();
}, 5000);

body {
  padding: 0;
  margin: 0;
}

#header {
  overflow: hidden;
}

#header-image {  
  border: none;
  width: 200vw;
  height: 100vh;
  transition: 1s;
  display: flex;
}

#photo_section_one {
  background-image: url('https://img.desktopwallpapers.ru/newyear/pics/wide/1920x1200/5f7ff83acdb7b743fb61468954e9c511.jpg');
  width: 100vw;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}

#photo_section_two {
  background-image: url('https://lh3.googleusercontent.com/proxy/N_97o7XR3tJd8Thp4vFQxXqqQVMSgBNhjGlvvHa9bDnpW-i4v6J9EElWWMSC8qumCbDAfvAjroBDWBu8F1HPl-hZX1BsYOk-wDNO26pT19W90o8n22aABvQ');
  width: 100vw;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}

<div id="header">
  <div id="header-image">
   <div id="photo_section_one">
    <div class="overlay" data-aos="fade-down-right">
      <h1>Photography Logo</h1>
    </div>
   </div>
   <div id="photo_section_two">
    <div class="overlay" data-aos="fade-down-right">
      <h1>Photography Logo</h1>
    </div>
   </div>
  </div>
</div>