[javascript] 버튼 클릭 시 움직이는 슬라이딩 기능

버튼 클릭 시 

슬라이딩 되면서 이미지가 전환되는 기능

 

 

1. 코드

See the Pen Untitled by youngwan2 (@youngwan2) on CodePen.

let btn = document.querySelectorAll('button');
let 슬라이드 = document.querySelectorAll('.container .inner div');
console.log(슬라이드);

console.log(btn);


btn.forEach((btnEl)=>{
    btnEl.addEventListener('click',()=>{
        render(btnEl);
        console.log(btnEl);
    });
});


function render(btnEl){
    슬라이드.forEach((divEl)=>{
        if(btnEl.id == 1){
            divEl.style.transform ="translate(0)";
        } else if(btnEl.id==2){
            divEl.style.transform ="translate(-100vw)" ;
        } else {
            divEl.style.transform ="translate(-200vw)" ;
        } ;
    });
};

2. 참고영상