캐러셀 동작 구현

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

popularButtons 함수 설명

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

변수 설정:

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

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

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

let currentIndex = 0;

왼쪽 버튼 이벤트 리스너

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

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

오른쪽 버튼 이벤트 리스너

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

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

scrollIntoView 메서드

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

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

behavior: 'smooth': 이 옵션은 스크롤이 부드럽게, 애니메이션처럼 진행되도록 합니다.
block: 'nearest': 이 옵션은 스크롤이 가능한 요소 내에서 대상 요소가 현재 보이는 부분에 가장 가까운 위치에 배치되도록 합니다.
inline: 'start': 이 옵션은 대상 요소가 스크롤 가능한 요소의 시작 부분에 배치되도록 합니다.

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!