script.js

//슬라이더 초기값 설정
let currentIndex = 0;

//밑 코드에서 사용할 변수들 선언(초기화)
let startTouchPosition = 0;
let endTouchPosition = 0;

const slider = document.querySelector('.slider');
const totalSlides = slider.children.length;

//슬라이드를 옮기는 함수
function moveToSlide(n) {
  let newSlidePosition = ((n - 1) * -100) / totalSlides;
  slider.style.transform = `translateX(${newSlidePosition}%)`;
  currentIndex = n;
}

// 페이지 로드 시 두 번째 슬라이드로 이동
document.addEventListener('DOMContentLoaded', () => {
  moveToSlide(currentIndex); // 초기 위치 설정
});


// 키보드 이벤트
document.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowLeft') {
    //가장 왼쪽에 위치하면 마이너스 되는걸 막기위한 if문
    if (currentIndex > 0) {
      //현재 위치 빼기 1
      moveToSlide(currentIndex - 1);
    }
  } else if (e.key === 'ArrowRight') {
    //가장 오른쪽에 위치하면 플러스 되는걸 막기위한 if문
    if (currentIndex < totalSlides - 1) {
      //현재 위치 더하기 1
      moveToSlide(currentIndex + 1);
    }
  }
});

// 터치 이벤트 시작
slider.addEventListener('touchstart', (e) => {
  startTouchPosition = e.touches[0].clientX;
});

// 터치 이벤트 끝
slider.addEventListener('touchend', (e) => {
  endTouchPosition = e.changedTouches[0].clientX;
  handleTouchMove();
});

function handleTouchMove() {
  if (startTouchPosition - endTouchPosition > 50 && currentIndex < totalSlides - 1) {
    // 오른쪽으로 슬라이드
    moveToSlide(currentIndex + 1);
  } else if (endTouchPosition - startTouchPosition > 50 && currentIndex > 0) {
    // 왼쪽으로 슬라이드
    moveToSlide(currentIndex - 1);
  }
}


// 마우스 휠 이벤트
slider.addEventListener('wheel', (e) => {
  e.preventDefault(); // 페이지 스크롤 방지

  if (e.deltaY < 0 && currentIndex > 0) {
    // 휠을 위로 스크롤 (이전 슬라이드로 이동)
    moveToSlide(currentIndex - 1);
  } else if (e.deltaY > 0 && currentIndex < totalSlides - 1) {
    // 휠을 아래로 스크롤 (다음 슬라이드로 이동)
    moveToSlide(currentIndex + 1);
  }
});