如何使图像滑块淡入淡出？(没有Jquery)

<div class="slider">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

.slider {
  position: relative;
  width: 500px;
  height: 300px;
  overflow: hidden;
}

.slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.slider img.active {
  opacity: 1;
}

const slider = document.querySelector('.slider');
const images = slider.querySelectorAll('img');
let currentIndex = 0;

function fadeInOut() {
  // 淡出当前图片
  images[currentIndex].classList.remove('active');
  
  // 计算下一张图片的索引
  currentIndex = (currentIndex + 1) % images.length;
  
  // 淡入下一张图片
  images[currentIndex].classList.add('active');
}

// 设置定时器，每隔3秒执行一次淡入淡出效果
setInterval(fadeInOut, 3000);