캐러셀 동작 구현

javascript를 통해 캐러셀 동작구현을 해보겠습니다.

이 함수는 인기 아이템 목록을 좌우로 스크롤하기 위한 두 버튼 (popular-left-button과 popular-right-button)의 동작을 처리합니다.

변수 설정:

• items: 이 코드는 전체 문서에서 .popular-item 클래스를 가진 모든 요소를 선택하여 NodeList를 반환합니다.

Copy
const items = document.querySelectorAll('.popular-item');

• leftButton과 rightButton: 각각 좌측 및 우측 스크롤 버튼에 대한 참조를 가져옵니다.

Copy
const leftButton = document.querySelector('.popular-left-button');
const rightButton = document.querySelector('.popular-right-button');

• currentIndex: 현재 화면에 보이는 아이템의 인덱스를 추적하는 데 사용되는 변수입니다. 초기값은 0으로 설정됩니다, 이는 첫 번째 아이템을 의미합니다.

Copy
let currentIndex = 0;

왼쪽 버튼 이벤트 리스너

• leftButton에 'click' 이벤트 리스너를 추가하며, 클릭 시 실행될 콜백 함수를 정의합니다.
• 콜백 함수 내에서, 현재 인덱스가 0보다 크면 (즉, 첫 번째 아이템이 아니라면), currentIndex를 감소시키고 해당 아이템으로 스크롤합니다.

Copy
leftButton.addEventListener('click', function () {
  if (currentIndex > 0) {
    currentIndex--;
    // ...
  }
});

오른쪽 버튼 이벤트 리스너

• rightButton에도 'click' 이벤트 리스너를 추가합니다.
• 여기서는 currentIndex가 마지막 아이템의 인덱스보다 작을 때, currentIndex를 증가시키고 해당 아이템으로 스크롤합니다.

Copy
rightButton.addEventListener('click', function () {
  if (currentIndex < items.length - 1) {
    currentIndex++;
    // ...
  }
});

scrollIntoView 메서드

• scrollIntoView는 요소를 사용자의 눈 앞으로 자동 스크롤하는 메서드입니다. 여기서는 현재 인덱스에 해당하는 아이템 (items[currentIndex])에 적용되어 있습니다.

Copy
items[currentIndex].scrollIntoView({
  behavior: 'smooth',
  block: 'nearest',
  inline: 'start',
});

• behavior: 'smooth': 이 옵션은 스크롤이 부드럽게, 애니메이션처럼 진행되도록 합니다.

• block: 'nearest': 이 옵션은 스크롤이 가능한 요소 내에서 대상 요소가 현재 보이는 부분에 가장 가까운 위치에 배치되도록 합니다.

• inline: 'start': 이 옵션은 대상 요소가 스크롤 가능한 요소의 시작 부분에 배치되도록 합니다.