TIL # 12 - Infinite Slider

정승옥(seungok)·2021년 4월 18일
0

TIL

목록 보기
12/16
post-thumbnail

✍️ 초기 과정

  • 현재 진행하고 있는 클론 프로젝트에서 구현해야할 슬라이드 기능이 첫번째 이미지나 마지막 이미지에서 끝나지 않고 계속 반복되는 무한 슬라이드였다.
  • 구글링을 통해 cloneNode 라는 메소드를 알게 됐고 처음과 마지막 이미지를 복제한 후 현재 슬라이드 박스 엘리먼트의 처음과 마지막에 추가한 후 해당 이미지에 슬라이드가 도달했을 때 원본 이미지 위치로 바꾸는 방식으로 진행했다.

🤜 구현 과정

✅ 이미지 복제

  • cloneNode 메소드를 통해 특정 노드를 복제할 수 있다.
  • 인자로 불리언 값을 전달하는데 true 일 경우 노드가 포함하는 자식까지 복제할 수 있고 false 일 경우 해당 노드만 복제된다.

✅ 초기값

  • 이전 슬라이드 구현했을 때는 left 값을 0 으로 시작했지만 무한 슬라이드에서는 복제된 마지막 이미지로 시작하기 때문에 원본 초기 이미지가 나올수 있도록 슬라이드 박스의 offsetWidth 만큼 뺀 값을 초기값으로 줘야한다.

✅ 조건부 transition

  • 스타일 컴포넌트에 transition 속성을 주면 복제된 이미지에서 원본 이미지로 넘어가는 모션이 발생하기 때문에 속성을 주면 안된다.
  • 하지만 원본 이미지 간에는 넘어가는 모션이 있어야 하기 때문에 슬라이드 버튼을 눌렀을 때 transition 속성을 추가해주고 모션이 끝날 때 속성을 다시 지워주는 방식으로 구현한다.

🖐 구현 결과

⛔️ 연속 클릭 문제

👎 첫번째 시도

  • 슬라이드 버튼을 눌렀을 때 연속 클릭을 방지하는 로직이 없어 모션이 끝나기도 전에 사진이 넘어가거나 복제 이미지에서 원본 이미지로 넘어갈 때 끊기는 문제가 발생했다.
  • 첫번째 시도했던 방법은 이벤트 객체의 detail 속성값을 이용했다.
  • detail 속성은 연속적으로 클릭했을 때 값이 누른 만큼 증가하여 값이 1(한번 클릭)일 때 클릭 이벤트가 발생하도록 했다.
  • 하지만 모바일에서는 값이 증가하지 않고 1 로 계속 출력돼 연속 클릭 문제를 해결하지 못했다.

👍 두번째 시도

  • 두번째로 시도한 방법은 timestamp 속성을 이용했다.
  • 첫번째 클릭했을 때 timestamp 값과 이어지는 클릭들의 timestamp 값의 차이를 이용해 원하는 시간 간격을 설정할 수 있었다.
  • 단위는 밀리세컨드로 1초인 1000을 기준으로 했을 때가 적당했다.
profile
Front-End Developer 😁

0개의 댓글