SLIDER | 이미지 슬라이더 | 좌로 넘기기

SLIDER 효과_좌로 움직이는 이미지를 만들어보자 !

SLIDER 효과 중 이미지가 좌로 움직이는 효과를 만들어 봅시다.
원본 페이지 내에서도 소스보기를 통해 코드를 바로 확인해보실 수 있습니다^0^

원본 소스 보기

script를 살펴봅시다 !

<script>
const sliderWrap = document.querySelector(".slider__wrap");
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)";         600 * 0 
// sliderInner.style.transform += "translateX(-600px)";      600 * 1
// sliderInner.style.transform += "translateX(-1200px)";     600 * 2
// sliderInner.style.transform += "translateX(-1800px)";     600 * 3
// sliderInner.style.transform += "translateX(-2400px)";     600 * 4

setInterval(() => {
    currentIndex = (currentIndex +1) % sliderCount;    //0 1 2 3 4 0 1 2 3 4 ...

    // if(currentIndex < 4) {
    //     currentIndex++;
    // }else {
    //     currentIndex = 0;
    // }

    // currentIndex < 4 ? currentIndex++ : currentIndex = 0;

    sliderInner.style.transform = "translateX("+ -600 * currentIndex +"px)";
},2000);
</script>

이미지 좌로 움직이기 |
여러 이미지를 감싸는 slider__wrap을 일정 시간 간격마다 좌로 이동해서 이미지가 움직이는 것처럼 보이게 해줍니다.

currentIndex = (currentIndex +1) % sliderCount; |
이 밖의 if 조건문을 사용할 수도 있습니다.