prev next
Javascript Slider Effect05

이미지 슬라이드 - 버튼 추가
highlight();
    modal();
    tabMenu();

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

    let currentIndex = 0;
    let sliderCount = slider.length;               
    let sliderWidth = sliderImg.offsetWidth    
    let sliderClone = sliderInner.firstElementChild.cloneNode(true);       
    sliderInner.appendChild(sliderClone);      
    function sliderEffect(){         
        currentIndex++;                
        sliderInner.style.transition = "all 0.3s"     
        sliderInner.style.transform = "translateX(-"+ sliderWidth * currentIndex +"px)" // sliderInner에 transform 효과
    
        if(currentIndex==sliderCount){    
            setTimeout(()=>{              
            sliderInner.style.transition = "0s"
            sliderInner.style.transform = "translateX(0)"
            }, 300)
            currentIndex=0;
        }
    }
    setInterval(sliderEffect, 2000);