Slider Effect 01 - 페이드 효과

    const sliderWrap = document.querySelector(".slider__wrap");		// 이미지 전체 박스
    const sliderImg = document.querySelector(".slider__img");			// 이미지 박스
    const slider = document.querySelectorAll(".slider");				// 슬라이더 할 이미지들

    let currentIndex = 0; 					// 현재 보이는 이미지
    let sliderCount = slider.length; 			// 이미지 갯수

    setInterval(() => {							// 정해진 시간뒤에 반복해서 실행한다
        let nextIndex = (currentIndex + 1) % 5;		// 5로 나눈 나머지값(0~4)으로 표현

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

        slider.forEach(slider => {
            slider.style.transition = "all 0.3s"		// 이미지에 트랜지션 효과
        })
        currentIndex = nextIndex;				// 다음값을 현재값에 입력
    }, 2000);								// 2초뒤에 반복

전체 사이트 보기