JavaScriptで、トップページに使える全面ループスライダーを作成

<ul id="slide-slideconatner">
 	<li class="slide-slide" >
       	<img src="images/music006.jpg" alt="">
 	</li>
 	<li class="slide-slide" >
       	<img src="images/music007.jpg" alt="">
 	</li>
 	<li class="slide-slide" >
       	<img src="images/music008.jpg" alt="">
 	</li>
 	<li class="slide-slide" >
       	<img src="images/music009.jpg" alt="">
 	</li>
 	<li class="slide-slide" >
       	<img src="images/music010.jpg" alt="">
 	</li>
</ul>

#slide-slideconatner{
	width:100vw;
	height:100svh;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: center center;  
	opacity: 0.8;
	background-size: cover;
	position:relative;
}
#slide-slideconatner .slide-slide{
	width: 100%;
	height: 100%;
	object-fit: cover;
	position:absolute;
	visibility: hidden;
}
#slide-slideconatner ul li.slide-slide:first-child{
	opacity: 0;
}
#slide-slideconatner .slide-slide img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

const slideSlide = document.querySelectorAll('#slide-slideconatner .slide-slide');
window.addEventListener('load', () => {
	for (let i = 0; i < slideSlide.length; i++) {
		const times = slideSlide.length;
		if(i === times -1){
			slideSlide[i].animate(
				{
					visibility: 'visible',
					translate:['100vw 0', 0],
					zIndex: '30',
				},
				{
					duration: 1000,
					delay:3000 * i,
					easing: 'ease',
					fill: 'forwards',
				}
			);
			slideSlide[i].animate(
				{
					zIndex: '-1'
				},
				{
					dulation: 0,
					delay:3000 + 3000 * i,
					fill: 'forwards',
				}
			);		
		}else if(i === 0){
			slideSlide[i].animate(
				{
					visibility: 'visible',
					filter: ['blur(10px)', 'blur(0)'],
					opacity:[0,1],
				},
				{
					duration: 1000,
					easing: 'ease',
					fill: 'forwards',
				}
			);
			slideSlide[i].animate(
				{
					visibility: 'hidden',
				},
				{
					dulation: 0,
					delay:4000,
					fill: 'forwards',
				}
			);	
		}else{
			slideSlide[i].animate(
				{
					visibility: 'visible',
					translate:['100vw 0', 0],
				},
				{
					duration: 1000,
					delay:3000 * i,
					easing: 'ease',
					fill: 'forwards',
				}
			);
			slideSlide[i].animate(
				{
					visibility: 'hidden',
				},
				{
					dulation: 0,
					delay:4000 + 3000 * i,
					fill: 'forwards',
				}
			);
		}
		setInterval(() => {
			if(i === times -1){
				slideSlide[i].animate(
					{
						visibility: 'visible',
						translate:['100vw 0', 0],
						zIndex: '30',
					},
					{
						duration: 1000,
						delay:3000 * i,
						easing: 'ease',
						fill: 'forwards',
					}
				);
				slideSlide[i].animate(
					{
						zIndex: '-1'
					},
					{
						dulation: 0,
						delay:3000 + 3000 * i,
						fill: 'forwards',
					}
				);
			}else{	
				slideSlide[i].animate(
					{
						visibility: 'visible',
						translate:['100vw 0', 0],
					},
					{
						duration: 1000,
						delay:3000 * i,
						easing: 'ease',
						fill: 'forwards',
					}
				);
				slideSlide[i].animate(
					{
					visibility: 'hidden',
					},
					{
						dulation: 0,
						delay:4000 + 3000 * i,
						fill: 'forwards',
					}
				);
			}
		},3000 * times);
	}
});