Spaces:

chohj06ms
/

oddhtml

Running

App Files Files Community

oddhtml / script.js

chohj06ms's picture

Update script.js

adb5801 verified 4 months ago

raw history blame contribute delete

No virus

2.1 kB

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

	//밑 코드에서 사용할 변수들 선언(초기화)
	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' \|\| e.key === 'a') {
	// 'ArrowLeft', 'a', 'ㅁ' 키 처리
	if (currentIndex > 0) {
	moveToSlide(currentIndex - 1);
	}
	} else if (e.key === 'ArrowRight' \|\| e.key === 'd') {
	// 'ArrowRight', 'd' 키 처리
	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);
	}
	}


	// 마우스 휠 이벤트
	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);
	}
	});