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);
  }
}