Slider Effect - 페이드효과

const sliderWrap = document.querySelector(".slider__wrap");		//이미지 전체 영역
const sliderImg = document.querySelector(".slider__img");		//이미지 움직이는 영역
const slider = document.querySelectorAll(".slider");			//5개의 이미지 저장

let currentIndex = 0;               //첫번째 이미지 (현재 보이는 이미지)
let sliderCount = slider.length;    //이미지 갯수

setInterval(() => {							//일정한 시간 간격으로 작업을 수행하기 위해서 사용
	let nextIndex = (currentIndex + 1) % 5;		//(currentIndex + 1)값을 5나눈 나머지값을 nextIndex 대입

	slider[currentIndex].style.opacity = "0"    //첫 번째 이미지를 안보이게
	slider[nextIndex].style.opacity = "1";      //두 번째 이미지를 안보이게

	slider.forEach(slider => {
		slider.style.transition = "all 0.5s"	// script에서 이미지 트랜지션 효과
        })

currentIndex = nextIndex;		//위에서 바뀐 nextIndex값을 currentIndex 대입 
}, 2000);						// 2초마다 반복(setInterval)

페이드 효과 사이트 바로가기

슬라이드 이펙트