슬라이드 이펙트 (2)

⭐️ 슬라이드 이펙트 02 ⭐️

01. < script > 에 작성하기

    <script>
    const sliderWrap = document.querySelector(".slider__wrap");></script>
    const sliderImg = document.querySelector(".slider__img");      // 보여지는 영역
    const sliderInner = document.querySelector(".slider__inner");  // 움직이는 영역
    const slider = document.querySelectorAll(".slider");           // 이미지
 
    let currentIndex = 0;               // 현재 보이는 이미지
    let sliderCount = slider.length;    // 이미지 갯수
 
    sliderInner.style.transition = "all 0.6s"       // 부드럽게 넘어가도록 애니메이션 주기
 
    // sliderInner.style.transform += "translateX(0px)"      -800 * 0    규칙성을 찾고 식을 어떻게 만들지 생각해보기
    // sliderInner.style.transform += "translateX(-800px)"   -800 * 1    width 값 * 이미지 순서(0~4)
    // sliderInner.style.transform += "translateX(-1600px)"  -800 * 2
    // sliderInner.style.transform += "translateX(-2400px)"  -800 * 3
    // sliderInner.style.transform += "translateX(-3200px)"  -800 * 4
 
 
 
    setInterval(() => {
        // currentIndex++;     // 현재 이미지 값을 하나씩 추가시킴
 
        currentIndex = (currentIndex + 1) % 5       // 1 2 3 4 0 1 2 3 4 0 1 2 3 4   위의 식과 같은 식
 
        // if(currentIndex < 4){
        //     currentIndex++;
        // } else {
        //     currentIndex = 0;
        // }
 
        // currentIndex < 4 ? currentIndex++ : currentIndex = 0;       삼항 연산자는 if문을 줄여서 쓰기 위해 만들어진 것은 아니므로, 살짝 의도에 맞지 않음
 
        // sliderInner.style.transform += "translateX(-100px)"     // + 붙이면 움직임
        sliderInner.style.transform = "translateX("+ -800 * currentIndex +"px)"     // 문자열로 비꿔서 넣어주기 위해 "+ -800*currentIndex +" 로 넣어주기 ; + 수식 + 은 안에 수식을 넣어준다는 의미 
    }, 1000);

03. 결과보기

☛ 원본 소스 보기