<div class="slider"><img class="img-item" src="assets/img/slider01.jpg" alt="" /></div>
.slider { position: relative; transition: 2s ease-in-out; } .img-item { position: absolute; top:0; left: 0; opacity:0; width:100%; aspect-ratio: 4/3; object-fit: cover; animation:imgfade 4s infinite; } @keyframes imgfade { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity:1; } }
const items = document.querySelector('.img-item'); const itemSrc =["assets/img/slider01.jpg","assets/img/slider02.jpg","assets/img/slider03.jpg"]; let num =0; function slideshow_timer(){ if(num===itemSrc.length-1){ num=0; } else { num++; } items.src=itemSrc[num]; } setInterval(slideshow_timer,4000);