02. 이미지 슬라이드 : 좌로 움직이기

       //slider02
        const sliderWrap = document.querySelector(".slider_wrap") //전체
        const sliderImg = document.querySelector(".slider_img")      //이미지 (한칸만) 보이는 영역
        const sliderInner = document.querySelector(".slider_inner")    //이미지 움직이는 영역 
        const slider = document.querySelectorAll(".slider")             //5개의 이미지 저장 console.log(slider): 5개 저장한 이미지 확인 가능

        let currentIndex = -1; //첫번째 이미지(현재 보이는 이미지)
        let sliderCount = slider.length //이미지 갯수
        
        setInterval(() => { 
            (currentIndex < sliderCount- 1) ? currentIndex++ : currentIndex = 0;

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

        }, 1500)

    //     //slider02
    //    //변수 설정 : 선택하기 //All과 구분  : 단일인가 아닌가
    //    const sliderWrap = document.querySelector(".slider_wrap") //전체
    //     const sliderImg = document.querySelector(".slider_img")      //이미지 (한칸만) 보이는 영역
    //     const sliderInner = document.querySelector(".slider_inner")    //이미지 움직이는 영역 
    //     const slider = document.querySelectorAll(".slider")             //5개의 이미지 저장 console.log(slider): 5개 저장한 이미지 확인 가능

    //     let currentIndex = -1; //첫번째 이미지(현재 보이는 이미지)
    //     let sliderCount = slider.length //이미지 갯수

        // setInterval(() => { //반복적으로 함수를 실행

        // // currentIndex++; //콘솔로 확인해보면 값이 늘어나야함, 0 1 2 3 4 5 6 7 8 = setInterval()때문에 값이 늘어남
        // // console.log(currentIndex);  //콘솔을 앞에서 확인 해야 0부터 시작
        // // currentIndex = (currentIndex+1) % 5; //1 2 3 4 0 1 2 3 4..... 

        // //if문으로 1 2 3 4 0 1 2 3 4.....
        // // if(currentIndex < sliderCount- 1){ //이미지인덱스(5) < 이미지 갯수(5) //-1 , 위에서 시작할 때 1부터 시작하기 위해 +1해주서
        // //     currentIndex++; // true : 0 1 2 3 4 
        // // } else {
        // //     currentIndex = 0; // flase :  < 5
        // // }
        // // console.log(currentIndex); 

        // //조건부 연산자
        // (currentIndex < sliderCount- 1) ? currentIndex++ : currentIndex = 0;
        // // console.log(currentIndex); 

        // //currentIndex값으로 아래와 값 출력하기
        // // sliderInner.style.left ="0" //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
        // // javascript 애니메이션
        // // sliderInner.style.left = -800 * currentIndex + "px";
        // // sliderInner.style.transition = "all 0.6s ease";

        // //GSAP 애니메이션
        // gsap.to(sliderInner, {
        //     duration: 0.4,               // =  sliderInner.style.transition = "all 0.6s ease";
        //     left: -800 * currentIndex,   // = sliderInner.style.left = -800 * currentIndex + "px";
        //     ease : "expo.out"            // = transition = ease
        // });

        // }, 3000) //2초(2000) 후에 반복적으로 함수를 실행