File size: 1,317 Bytes
2fece8f b35555d 2fece8f b35555d 2fece8f b35555d 2fece8f b35555d 2fece8f b35555d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
let currentIndex = 1; // ์ธ๋ฑ์ค 1์์ ์์ํ๋๋ก ์์
const slider = document.querySelector('.slider');
const totalSlides = slider.children.length;
function moveToSlide(n) {
let newSlidePosition = ((n - 1) * -100); // ์ฒซ ๋ฒ์งธ ์ฌ๋ผ์ด๋๋ฅผ ์ค์์ ์์น์ํด
slider.style.transform = `translateX(${newSlidePosition}vw)`;
}
// ์ด๊ธฐ ์ฌ๋ผ์ด๋ ์์น ์ค์
moveToSlide(currentIndex);
// ํค๋ณด๋ ์ด๋ฒคํธ ํธ๋ค๋ฌ
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowLeft') {
if (currentIndex > 1) { // 0 ๋์ 1์ ์ฌ์ฉ
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 > 1) { // 0 ๋์ 1์ ์ฌ์ฉ
moveToSlide(currentIndex - 1);
}
}
|