Javascript Slider Effect02

이미지 슬라이드 - 좌로 움직이기

<section id="sliderType02">
    <div class="slider__wrap">
        <div class="slider__img">
            <div class="slider__inner">
                <div class="slider"><img src="img/images06.jpg" alt="이미지1"></div>
                <div class="slider"><img src="img/images07.jpg" alt="이미지2"></div>
                <div class="slider"><img src="img/images08.jpg" alt="이미지3"></div>
                <div class="slider"><img src="img/images09.jpg" alt="이미지4"></div>
                <div class="slider"><img src="img/images10.jpg" alt="이미지5"></div>
            </div>
        </div>
    </div>
</section>

.slider__wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}
.slider__img {     /*화면 보이는 구간 */
    width: 800px;
    height: 480px;
    overflow: hidden;
}

.slider__inner {     /* 이미지 움직이는 영역 */
    display: flex;
    width: 4000px;
    position: relative;     /* left를 사용하기 위해서 */
}
/* position: relative를 쓰는 이유: 1. position:absolute의 기준점을 잡을 때 / 2. float:left를 주고 싶을 때 */

.slider {    
    width: 800px;
    position: relative;
}

.slider::before {
    position: absolute;
    left: 5px;top: 5px;
    background: rgba(0,0,0,0.4);
    color: #fff;
    padding: 5px 10px 3px;
}

.slider:nth-child(1):before {content: '이미지1';}
.slider:nth-child(2):before {content: '이미지2';}
.slider:nth-child(3):before {content: '이미지3';}
.slider:nth-child(4):before {content: '이미지4';}
.slider:nth-child(5):before {content: '이미지5';}

const sliderWrap = document.querySelector(".slider__wrap")
const sliderImg = document.querySelector(".slider__img") //이미지 한칸만 움직이는 영역
const sliderInner = document.querySelector(".slider__inner") //이미지 움직이는 영역
const slider = document.querySelectorAll(".slider") //각각의 이미지 

console.log(slider); //첫번째이미지(현재 보이는 이미지)

let currentIndex = -1;

setInterval(() => {
    // 1. currentIndex = (currentIndex+1)%5;

    // 2. if (currentIndex == slider.length) currentIndex = 0;
    // console.log(currentIndex);
    // currentIndex++;

    // 3.
    console.log(currentIndex);
    (currentIndex < slider.length - 1) ? currentIndex++ : currentIndex = 0;
    
    // Javascript 애니메이션
    // sliderInner.style.left = -(800 * currentIndex) + "px";
    // sliderInner.style.transition = "all 1s ease";

    // sliderInner.style.left = "0px"; // 800 * 0
    // sliderInner.style.left = "-800px"; // 800 * 1
    // sliderInner.style.left = "-1600px"; // 800 * 2
    // sliderInner.style.left = "-2400px"; // 800 * 3
    // sliderInner.style.left = "-3200px"; // 800 * 4

    //GSAP 애니메이션
    gsap.to(sliderInner, {duration: 0.4, 
        left: -800 * currentIndex, 
        ease: "slow(0.7, 0.7, false)"
    })

    //"elastic.out(1, 0.3)"
}, 2000)

공사중입니다.