sliderEffect01 -페이드 효과

// 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... 반복

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

	 //각 슬라이더마다 효과 주기
      slider.forEach(slider => {
          slider.style.transition = "all 0.3s"		
      });

      currentIndex = nextIndex     //nextIndex를 currentIndex에 대입
  }, 2000);                       //2초마다
        
  페이드 효과 원리  
  //2초가 지나면 
  //첫 번째 이미지는 -->opacity : 0
  // 두 번째 이미지는 -->opacity : 1

  //다시 2초가 지나면
  //첫 번째 이미지는 -->opacity : 0
  //두 번째 이미지는 -->opacity : 0
  //세번째 이미지는 opacity : 1

  //다시 2초가 지나면
  //첫 번째 이미지는 -->opacity : 0
  //두 번째 이미지는 -->opacity : 0
  //세번째 이미지는 --> opacity : 0
  //네번째 이미지는 --> opacity : 1
  
  //다시 2초가 지나면
  //첫 번째 이미지는 -->opacity : 0
  //두 번째 이미지는 -->opacity : 0
  //세번째 이미지는 --> opacity : 0
  //네번째 이미지는 --> opacity : 0
  //다섯번째 이미지는 --> opacity : 1
  //다시 처음으로