[TIL] 24.01.11

[오늘 시도한 것]

• 각각 해당하는 live의 좌, 우로 움직이는 버튼 동작하기

[코드]

let nextPosition = 0;

function nextSlide(direction, liveNumber) {
    if (direction === 'right') {
        nextPosition -= 80;
    } else if (direction === 'left') {
        nextPosition += 80;
    }
    
    // 눌렀을 때 어디로 얼마나 움직일 껀지 설정해주기
    

    let live = document.getElementById('live' + liveNumber);
    live.style.transform = `translate(${nextPosition % 320}vw)`;
}

// 어떤 live을 움직일껀지 변수로 할당해주었다.

for (let i = 1; i <= 6; i++) {
    let NRB = document.getElementById('NRB' + i);
    let NLB = document.getElementById('NLB' + i);

    NRB.addEventListener('click', function () {
        nextSlide('right', i);
    });

    NLB.addEventListener('click', function () {
        nextSlide('left', i);
    });
}

// 반복문을 통해 버튼에 숫자를 넣어주고, 클릭이벤트를 넣어주면 된다.

[배운점]

저번에 비슷한 코드가 있었는데, 숫자가 생기고 반복문에 넣어서 하려니 생각보다
마음처럼 쉽지 않았다...
그래도 하나하나 더 배워 다음에는 꼭 사용할 수 있기를!