javascript

{
        window.onload = function(){
            let currentIndex = 0;   // 현재 이미지
            const slider = document.querySelectorAll(".slider");    // 모든 이미지를 변수에 저장
        
            setInterval(() => { // 3초에 한번씩 
                let nextIndex = (currentIndex + 1) % slider.length;       // 0 1 2 3 4 0 1 2 3 4
        
                slider[currentIndex].style.opacity = "0";   // 첫번째 이미지가 사라짐
                slider[nextIndex].style.opacity = "1";  // 두번째 이미지가 나타남
                slider.forEach(img => img.style.transition = "all 1s");  //이미지 애니메이션 추가
        
                currentIndex = nextIndex;   // 두번째 인덱스값을 현재 인덱스값에 저장
        
                console.log(currentIndex)
            }, 3000);
        }
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>     // jquery 사용시 필수 사항
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>      // jquery 사용시 필수 사항
    {
        $(function(){
            let currentIndex = 0;   // 현재 이미지
        
            setInterval(function(){     // 3초에 한번씩 실행
                let nextIndex = (currentIndex + 1) % 5;
        
                $(".slider").eq(currentIndex).fadeOut(1200);    // 첫번째 이미지 사라짐
                $(".slider").eq(nextIndex).fadeIn(1200);    // 두번째 이미지 나타남
        
                currentIndex = nextIndex;
        
            }, 3000);
        });
    }

{
        // 선택자
        const sliderWrap = document.querySelector(".slider__wrap");
        const sliderImg = sliderWrap.querySelector(".slider__img");       //보여지는 영역
        const sliderInner = sliderWrap.querySelector(".slider__inner ")    //움직이는 영역;
        const slider = sliderWrap.querySelectorAll(".slider");               // 개별 이미지
    
        // 변수 설정
        let currentIndex = 0;               // 현재 보이는 이미지
        let sliderCount = slider.length;    // 이미지 갯수
        let sliderInterval = 3000;           // 이미지 변경 간격 시간
    }

{
        sliderInner.style.transition = "all 0.6s";
    
        setInterval(() => {
            currentIndex = (currentIndex + 1) % sliderCount;
            sliderInner.style.transform = "translateX("+ -800 * currentIndex + "px)";
        }, sliderInterval);
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    {
        setInterval(() => {
            currentIndex = (currentIndex + 1) % sliderCount;
    
            gsap.to(sliderInner, {
                x: -800 * currentIndex,
                duration: 1,
                ease: "power4.out"
            }) 
        }, sliderInterval);
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>     // jquery 사용시 필수 사항
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>      // jquery 사용시 필수 사항
    {
        setInterval(() => {
            currentIndex = (currentIndex + 1) % sliderCount;
    
            $(".slider__inner").css("position", "relative");
            $(".slider__inner").animate({left: -800 * currentIndex}, 600, "easeOutElastic");
    
        }, sliderInterval);
    }

{
        // 선택자
        const sliderWrap = document.querySelector(".slider__wrap");
        const sliderImg = sliderWrap.querySelector(".slider__img");       //보여지는 영역
        const sliderInner = sliderWrap.querySelector(".slider__inner ")    //움직이는 영역;
        const slider = sliderWrap.querySelectorAll(".slider");               // 개별 이미지
    
        // 변수 설정
        let currentIndex = 0;                                               // 현재 이미지
        let sliderCount = slider.length;                                    // 이미지 갯수
        let sliderInterval = 2000;                                          // 이미지 변경 간격 시간
        let sliderWidth = slider[0].offsetWidth                             //이미지 가로값
        let sliderclone = sliderInner.firstElementChild.cloneNode(true);    // 첫번째 이미지를 복사
}

{
        // javascript
        // 복사한 이미지를 마지막에 붙여넣기
        sliderInner.appendChild(sliderclone);
    
        function sliderEffect (){
            currentIndex++;
    
            sliderInner.style.transition = "all 0.6s ease-in";
            sliderInner.style.transform = "translateX(-"+ sliderWidth * currentIndex +"px)";
    
                // 마지막 이미지가 위치 했을 때
                if(currentIndex == sliderCount){
                setTimeout(() => {
                    sliderInner.style.transition = "0s";
                sliderInner.style.transform = "translateX(0px)";
                }, 700);
                currentIndex = 0;
            }
        };
        setInterval(sliderEffect, sliderInterval);
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>   // gsap 사용시 필수
    {
        // 복사한 이미지를 마지막에 붙여넣기
        sliderInner.appendChild(sliderclone);
    
        function sliderEffect() {
            currentIndex++;
    
            gsap.to(sliderInner, {
                x: -sliderWidth * currentIndex,
                druation: 0.6,
                ease: "power2.out"
            });
    
            // 마지막 이미지가 위치 했을 때
            if (currentIndex === sliderCount) {
                setTimeout(() => {
                        gsap.set(sliderInner, {x: 0});
                        currentIndex = 0;
                    }, 700);
            };
        };
        setInterval(sliderEffect, sliderInterval);
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>     // jquery 사용시 필수 사항
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>      // jquery 사용시 필수 사항
    {
        // 복사한 이미지를 마지막에 붙여넣기
        $(".slider__inner").append(sliderclone);
    
        function sliderEffect(){
            currentIndex++;
    
            $(".slider__inner").css({
                "transition": "all 0.6s",
                "transform": "translateX(-"+ sliderWidth * currentIndex + "px)"
            });
    
            // 마지막 이미지가 위치 했을 때
            if(currentIndex === sliderCount){
                setTimeout(() => {
                    $(".slider__inner").css({
                        "transition": "0s",
                        "transform": "translateX(0px)"
                    });
                }, 700);
                currentIndex = 0;
            }
        };
        setInterval(sliderEffect, sliderInterval);
    }