슬라이드 이펙트 (1)

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

01. < script > 에 작성하기

    // 가운데 이미지 슬라이드
    const sliderWrap = document.querySelector(".slider__wrap");
    const sliderImg = sliderWrap.querySelector(".slider__img");     // sliderWrap 안에서 찾으라고 document 대신에 sliderWrap 을 적어줌
    const slider = sliderWrap.querySelectorAll(".slider");

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

    setInterval(() => {
        // console.log("실행")                        // 1000 = 1초에 한 번씩 실행함
        // let nextIndex = (currentIndex + 1) % 5;   // 숫자를 5로 한정지으면 사진을 5장 밖에 못 넣기 때문에,
        // 1, 2, 3, 4, 5, 6, 7, 8, 9, ...
        // 1, 2, 3, 4, 0, 1, 2, 3, 4, 0, ...

        let nextIndex = (currentIndex + 1) % sliderCount;   // 이미지 갯수에 맞춰서 계산할 수 있도록 sliderCount 를 지정함

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

        currentIndex = nextIndex;       // 현재 보이는 이미지 = 다음 순서로
    }, 3000)

03. 결과보기

☛ 원본 소스 보기