JavaScriptで、パララックスアニメーションのスライダーを作成

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

#parallax-slideconatner{
	width:100vw;
	height:100svh;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: center center;
	opacity: 0.8;
	background-size: cover;
	background-color: #272727;
	position:relative;
}
#parallax-slideconatner .slide{
	width: 100%;
	height: 100%;
	object-fit: cover;
	position:absolute;
	visibility: hidden;
}

#parallax-slideconatner ul li.slide:first-child{
	visibility: visible;
	opacity: 0;
}

#parallax-slideconatner .slide img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

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