본문으로 건너뛰기

캐러셀 동작 구현

캐러셀 동작 구현

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


popularButtons 함수 설명

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

변수 설정:

  • items: 이 코드는 전체 문서에서 .popular-item 클래스를 가진 모든 요소를 선택하여 NodeList를 반환합니다.
const items = document.querySelectorAll('.popular-item');
  • leftButtonrightButton: 각각 좌측 및 우측 스크롤 버튼에 대한 참조를 가져옵니다.
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': 이 옵션은 대상 요소가 스크롤 가능한 요소의 시작 부분에 배치되도록 합니다.

다음 내용이 궁금하다면?

월 12,500원 PLUS 멤버십 가입 or 강의를 등록해 주세요!