[Javascript] 이미지 터치 슬라이드 기능 구현하기

터치 이벤트를 통해서 이미지를 슬라이드 기능 구현하는 방법에 대해 간략하게 알아보겠습니다.

 

1. HTML 작성

<img id="MyImg" alt="..."
       ontouchstart="startDrag(event)"
       ontouchmove="drag(event)"
       ontouchend="endDrag(event)"
  />

• img 태그에 touch 이벤트를 연결합니다.

 

2. script 작성

let isDragging = false;
let startPosX = 0; // 시작지점
let endPosX = 0; // 끝지점
let startLeft = 0;
let maxMove = 50; // 최대 이동 거리 설정

// 드래그 시작
function startDrag(event) {
    isDragging = true;
    startPosX = event.touches[0].clientX;
    const myImg = document.getElementById('myImg');
    startLeft = parseInt(window.getComputedStyle(myImg).getPropertyValue('left'));
}

// 드래그 중
function drag(event) {
    if (!isDragging) return;

    const offsetX = event.touches[0].clientX - startPosX;
    const myImg = document.getElementById('myImg');

    // 이동 범위 제한
    let adjustedOffsetX = offsetX;

    // 최대 이동 범위 초과 시 조정
    if (Math.abs(offsetX) > maxMove) {
    	adjustedOffsetX = offsetX > 0 ? maxMove : -maxMove;
    }

    myImg.style.left = `${startLeft + adjustedOffsetX}px`;

    endPosX = event.touches[0].clientX;
}

// 드래그 끝
function endDrag(event) {
    if (!isDragging) return;
    isDragging = false;

    // 원래 위치로 복귀
    const myImg = document.getElementById('myImg');
    myImg.style.left = `${startLeft}px`;

    const diff = endPosX - startPosX;

    if (diff > maxMove) {
    	// 이전으로 이동
    	console.log('prev');
    } else if (diff < -maxMove) {
    	// 다음으로 이동
    	console.log('next');
    }
}

감사합니다.