자바로 슬라이드 이미지 코드를 만들었는데 슬라이드랑 터치로 이미지를 넘기도록 코드를 만들었습니다.
이미지를 넘긴 후 다음이미지로 넘기려고 화면을 누르면 자꾸 이전 이미지로 돌아가요...
아래는 현재 코드입니다...
document.addEventListener('DOMContentLoaded', () => {
const slides = document.querySelectorAll(".slide");
let currentIndex = 0;
const totalSlides = slides.length;
let startX = 0, currentX = 0, delta = 0;
let isDragging = false;
let wasDragged = false; // 드래그가 발생했는지 여부
const offsetBase = 290;
const threshold = 50; // 전환 임계값
function updateSlides() {
slides.forEach(slide => {
const i = Number(slide.dataset.index);
const distance = i - currentIndex;
const baseOffset = distance * offsetBase;
let scale, opacity;
if (distance === 0) {
scale = 1;
opacity = 1;
slide.style.zIndex = 2;
} else if (Math.abs(distance) === 1) {
scale = 0.8;
opacity = 0.5;
slide.style.zIndex = 1;
} else {
scale = 0.8;
opacity = 0;
slide.style.zIndex = 0;
}
slide.style.transition = 'transform 0.3s ease, opacity 0.3s ease';
slide.style.transform = `translate(-50%, -50%) translateX(${baseOffset}px) scale(${scale})`;
slide.style.opacity = opacity;
});
}
function getClientX(e) {
return e.type.includes("mouse") ? e.clientX : e.touches[0].clientX;
}
function dragStart(e) {
isDragging = true;
wasDragged = false; // 드래그 시작 시 false로 초기화
startX = getClientX(e);
currentX = startX;
slides.forEach(slide => {
slide.style.transition = 'none';
});
}
function dragMove(e) {
if (!isDragging) return;
currentX = getClientX(e);
delta = currentX - startX;
if (Math.abs(delta) > 5) { // 미세한 움직임은 클릭으로 간주하지 않음
wasDragged = true;
}
slides.forEach(slide => {
const i = Number(slide.dataset.index);
const distance = i - currentIndex;
const baseOffset = distance * offsetBase;
const currentOffset = baseOffset + delta;
// 효과적 값 계산: 중앙에 가까워질수록 효과 적용
const effective = Math.abs(currentOffset) / offsetBase;
let scale, opacity;
if (effective <= 1) {
scale = 1 - 0.2 * effective;
opacity = 1 - 0.5 * effective;
} else {
scale = 0.8;
opacity = 0.5;
}
slide.style.transform = `translate(-50%, -50%) translateX(${currentOffset}px) scale(${scale})`;
slide.style.opacity = opacity;
});
e.preventDefault();
}
function dragEnd(e) {
if (!isDragging) return;
isDragging = false;
const endX = e.type.includes("mouse") ? e.clientX : e.changedTouches[0].clientX;
delta = endX - startX;
if (delta < -threshold && currentIndex < totalSlides - 1) {
currentIndex++;
} else if (delta > threshold && currentIndex > 0) {
currentIndex--;
}
updateSlides();
delta = 0;
}
slides.forEach(slide => {
slide.addEventListener("mousedown", dragStart);
slide.addEventListener("mousemove", dragMove);
slide.addEventListener("mouseup", dragEnd);
slide.addEventListener("mouseleave", dragEnd);
slide.addEventListener("touchstart", dragStart, { passive: false });
slide.addEventListener("touchmove", dragMove, { passive: false });
slide.addEventListener("touchend", dragEnd, { passive: false });
// 클릭 이벤트: 드래그가 발생했다면 무시
slide.addEventListener("click", (e) => {
if (wasDragged) {
e.preventDefault();
return;
}
const clickedIndex = Number(slide.dataset.index);
if (clickedIndex !== currentIndex) {
currentIndex = clickedIndex;
updateSlides();
}
});
});
updateSlides();
});
댓글 영역
획득법
① NFT 발행
작성한 게시물을 NFT로 발행하면 일주일 동안 사용할 수 있습니다. (최초 1회)
② NFT 구매
다른 이용자의 NFT를 구매하면 한 달 동안 사용할 수 있습니다. (구매 시마다 갱신)
사용법
디시콘에서지갑연결시 바로 사용 가능합니다.