script.js

let currentIndex = 1;
let startTouchPosition = 0;
let endTouchPosition = 0;

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

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

function moveToSlide(n) {
  let newSlidePosition = (n * -100) / totalSlides;
  slider.style.transform = `translateX(${newSlidePosition}%)`;
  currentIndex = n;
}

// 키보드 이벤트
document.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowLeft') {
    if (currentIndex > 0) {
      moveToSlide(currentIndex - 1);
    }
  } else if (e.key === 'ArrowRight') {
    if (currentIndex < totalSlides - 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);
  }
}