03. 슬라이드 이펙트 - 트랜지션 효과

슬라이드 이펙트 01. 트랜지션 효과

javascript를 이용하여 슬라이드 이펙트를 만들었습니다. 열심히 공부하세요!

---

슬라이드 이펙트 01

원본 소스 보기

자바스크립트

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

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

setInterval(() => {

    let nextIndex = (currentIndex + 1) % sliderCount; //다음 이미지

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

    currentIndex = nextIndex;


    //0 1 2 3 4 5 6 7 8 9...
    //0 1 2 3 4 0 1 2 3 4...


}, 2000);