ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 자바스크립트 모바일 터치 슬라이더 구현하기 (feat. 터치 이벤트)
      front개발 2022. 11. 1. 17:42
      728x90
      반응형

      출처: https://penguingoon.tistory.com/257

       

      자바스크립트 모바일 터치 슬라이더 구현하기 (feat. 터치 이벤트)

      안녕하세요! 오늘은 모바일 전용 이미지 슬라이더를 간단하게 구현해보았습니다. 모바일에서는 손가락을 이용해 영역을 터치하면 터치이벤트가 발생하게 되는데, 이 터치의 시점과 위치를 잘

      penguingoon.tistory.com

      모바일에서는 손가락을 이용해 영역을 터치하면 터치이벤트가 발생하게 되는데, 이 터치의 시점과 위치를 잘 이용하면 버튼 없이 손가락만으로 움직일 수 있는 이미지 슬라이더 구현이 가능합니다. 그럼 바로 코드를 볼텐데, 참고로 코드 구성은 index.html + styles.css + script.css 세 가지입니다. 

       

      index.html

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      <!DOCTYPE html>
      <html>
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" 
        content="width=device-width, initial-scale=1.0">
        <link href="styles.css" rel="stylesheet">
        <title>Slider for mobile</title>
      </head>
      <body>
        <h1>SWIPE!</h1>
        <div class="album">
          <div class="images">
          </div>
        </div>
      <script src="script.js">
        </script>
      </body>
      </html>

      태그는 단순히 이미지 네 장을 포함하고 있는 블록 영역을 만드는 것 외에 특별한 사항이 없습니다. 이미지는 제가 개인적으로 보관하고 있는 제 개인 서버(?)의 사진들을 사용하고 있습니다. styles.css를 연결해주고 script.js도 연결해주는 걸 잊어서는 안됩니다(각각 7번 줄과 20번 줄).

       

       

      styles.css

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      html, body{ margin: 0; }
      h1{ text-align: center; }
      .album{
        height: 300px;
        width: 375px;
        overflow: hidden;
      }
      .images{
        position: relative;
        display: flex;
        height: 300px;
        transition: transform 0.5s;
      }
      img{
        width: 375px;
      }

      스타일에도 특별한 것은 없습니다. 모든 이미지를 적절한 크기로 표시해주기 위해 너비를 375px로 맞춰주었다, 정도? 여기에 더해 .images 영역의 position을 relative로 지정해주었는데, 이는 translateX를 사용해 X축 이동을 시켜줌으로써 슬라이드 효과를 주려는 의도입니다.

       

       

      script.js

      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
      let curPos = 0;
      let postion = 0;
      let start_x, end_x;
      const IMAGE_WIDTH = 375;
      const images = document.querySelector(".images") 
       
      images.addEventListener('touchstart', touch_start);
      images.addEventListener('touchend', touch_end);
       
      function prev(){
        if(curPos > 0){
          postion += IMAGE_WIDTH;
          images.style.transform = `translateX(${postion}px)`;
          curPos = curPos - 1;
        }
      }
      function next(){
        if(curPos < 3){
          postion -= IMAGE_WIDTH;
          images.style.transform = `translateX(${postion}px)`;
          curPos = curPos + 1;
        }
      }
       
      function touch_start(event) {
        start_x = event.touches[0].pageX
      }
       
      function touch_end(event) {
        end_x = event.changedTouches[0].pageX;
        if(start_x > end_x){
          next();
        }else{
          prev();
        }
      }

      prev 함수와 next 함수는 각각 '앞으로가기'와 '뒤로가기' 기능을 수행하는 함수입니다. 그리고 각각의 함수는 사용자가 터치 이벤트를 발생시킨, 즉 손가락으로 화면을 문지르는 순간에 호출됩니다(touch_end 함수).

      여기에서는 사용자의 터치 이벤트를 감지하기 위해 addEventListner를 통해 touchstart 이벤트와 touchend 이벤트에 대한 이벤트 리스너를 등록해주었는데, 각각의 이벤트는 '손가락이 닿는 순간'과 '닿아있던 손가락이 화면에서 떨어지는 순간'을 의미합니다. 이때 이벤트 객체는 터치가 이루어진 지점의 위치를 속성으로 가지는데(pageX), 이를 읽어들여 오른쪽으로 스와이프 했는지 왼쪽으로 스와이프 했는지를 판단할 수 있습니다(touch_end 함수 내부를 보시면 이해 가능합니다).

       

       

      이상입니다. 모바일에서 사용할 만한 이미지 슬라이더 관련 기능을 제공하는 라이브러리가 많이 있겠지만, 라이브러리의 헤비(heavy)함을 굳이 감당하기보다 바닐라 자바스크립트로 딱 필요한 기능만 구현하는 것도 좋은 방법인 것 같습니다. 

      728x90
      반응형

      'front개발' 카테고리의 다른 글

      모바일기기접속 확인  (0) 2023.01.27
      JSFiddle이란, 사용법 (퍼옴)  (0) 2022.08.29
      (퍼옴) 적응형 웹 디자인  (0) 2022.05.27
      GET and Post method 개념 차이 in HTTP  (0) 2022.01.18
      javascript - 자바 스크립트에서 오래 실행되는 함수를 분해하지만 성능을 유지하는 방법  (0) 2021.11.16

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바