スライドショーを生のjavascriptで書いてみた

<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);