Simple Autoplay Slider with Mask

simple_autoplay_slider.js

// HTML
// <div class="container">
//   <img src="https://picsum.photos/1920/1079" alt="">
//   <img src="https://picsum.photos/1920/1081" alt="">
//   <img src="https://picsum.photos/1921/1081" alt="">
//   <img src="https://picsum.photos/1922/1081" alt="">
// </div>

// SCSS
// .container {
//   width: 100%;
//   height: 100vh;
// }
// img {
//   position: absolute;
//   top: 0;
//   left: 0;
//   mask-image: linear-gradient(
//       to right,
//       transparent 33.33%,
//       62%,
//       black 66.66%
//   );
//   mask-size: 300vw 100%;
//   mask-position: 0vw 0px;
//   z-index: 1;
//   transition: 3s mask-position;
//   &.visible {
//     z-index: 0;
//     transition: 0s mask-position;
//     mask-position: -200vw 0px;
//   }
// }

const imgs = document.querySelectorAll(".container img");
let current = 0;
function goNext() {
  imgs[current].classList.remove("visible");
  current++;
  if (current >= imgs.length) {
    current = 0;
  }
  imgs[current].classList.add("visible");
}
window.setInterval(goNext, 3000);
goNext();
window.setTimeout(goNext, 300);