JavaScriptで、ズームインアニメーションワイプのスライダーを作成

<ul id="zoom-slideconatner">
	<li class="slide" >
       	<img src="images/music001.jpg" alt="">
	</li>
	<li class="slide" >
       	<img src="images/music002.jpg" alt="">
	</li>
	<li class="slide" >
       	<img src="images/music003.jpg" alt="">
	</li>
	<li class="slide" >
       	<img src="images/music004.jpg" alt="">
	</li>
	<li class="slide" >
       	<img src="images/music005.jpg" alt="">
	</li>
	<li class="slide" >
       	<img src="images/music006.jpg" alt="">
	</li>
</ul>

#zoom-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;
}

#zoom-slideconatner .slide{
	width: 100%;
	height: 100%;
	object-fit: cover;
	position:absolute;
	opacity: 0;
	visibility: hidden;
}

#zoom-slideconatner ul li.slide:first-child{
	opacity: 0;
}

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

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

	}
});