Slider Effect01- 페이드 효과

setInterval()을 이용한 이미지 슬라이드 - 페이드 효과

 //setInteval
  //slider01
        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; //1 2 3 4 0 1 2 3 4 0... 5로 나눠서 나머지 값만 나오게. 
            slider[currentIndex].style.opacity = "0"    //첫 번째 이미지를 안보이게
            slider[nextIndex].style.opacity = "1"               //두 번째 이미지를 보이게
            currentIndex = nextIndex;               //nextIndex 값을 currentIndex에 대입시켜서 계속 반복.
            
            slider.forEach(slider => {
                slider.style.transition = "all 0.3s";       //트랜지션 효과를 써서 부드럽게 움직이도록
            });
        
        }, 2000);
        //함수의 재활용. 함수의 반복실행. setInterval

setInterval()참고

setInterval() - Web APIs | MDN

이번에는 setInterval() 함수를 이용해서 만드는 페이드 효과 이미지 슬라이드를 만들었습니다. 

opacity가 0에서 1로 변하면서 css 속성 transition를 이용하여 부드럽게 사라졌다 나오는 효과를 사용했습니다.

setInterval