슬라이드 이펙트_01 : 이미지를 한장씩 바꿔보자~

슬라이더 이펙트 01

한장씩 넘어가는 슬라이드 이미지를 구현해보겠습니다.

---

JS코드

정해진 이미지의 길이만큼 정보를 받아와 한장씩 이미지를 넘겨주는 스크립트를 구현해보겠습니다

번외. 이번에 사용한 다음 이미지를 보여줄 값을 sliderCount로 나눠 구한 이유는
만약 sliderCount가 5가 나왔을때를 가정해본다면 2를 5로 나누어도 몫은 0 나머지는 2 나눌수가 없어서 그대로 나머지가 되는 것이며,
5이상의 수일때만 나눌 수가 있기 때문에 1부터 4까지는 5보다 작아서 나눌 수가 없으므로 몫이 아닌 그대로 나머지가 됩니다.

let nextIndex = (currentIndex + 1) % sliderCount;

---

우선 이미지 슬라이드가 구현된 만큼만 반복하기 위해서는 아래와 같은 방법이 필요합니다.

1. 우선 각각 [.slider__wrap] 클래스의 정보를 받는 [sliderWrap] 상수를 생성합니다.
2. 그 후 [sliderWrap] 상수에 담긴 [.slider__img / .slider] 클래스를 정보를 가져오는 상수를 생성합니다.
3. 현재 이미지를 보여줄 값을 담기 위한 currentIndex 변수를 만들어주고
4. 이미지 갯수를 가져오기 위해 slider 변수에 .length 메서드를 통해 이미지 갯수를 가져옵니다.
5. setInterval 을 통해 하단의 다음 이미지를 보여줄 값을 계산해주는 수식을 작성해 1000=1초 만큼 넘겨줍니다.

const sliderWrap = document.querySelector(".slider__wrap");
    const sliderImg = sliderWrap.querySelector(".slider__img");
    const slider = sliderWrap.querySelectorAll(".slider");

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

    setInterval(()=>{

        let nextIndex = (currentIndex + 1) % sliderCount; //출력될 이미지
        slider[currentIndex].style.opacity = "0";         //현재 받은 이미지 투명도 0
        slider[nextIndex].style.opacity = "1";            //출력될 이미지 투명도 1


        currentIndex=nextIndex;                           //출력될 이미지를 현재 이미지(currentIndex)에 대입
        
    },1000) // 1=(1000)초에 한번씩 실행

---

완성예시