초기화, 동적크기 슬라이드 만들기

조별 과제로 간단한 자기소개를 적는 페이지를 만들어야 했다. 

사실 첫 과제에 프론트 기초는 침흘리면서 들었던 터라...

기억은 가물가물하지만, 자기소개를 슬라이드 형식으로 보여주면 괜찮을거 같았다.

그래서 스크립트를 구글링하고, 원하는 폼에 맞게 튜닝하는 방식으로 진행했다.

구글의 힘을 빌려도 괜찮은걸까...싶었지만, 어찌되었든 뜯어가며 튜닝을 하니 괜찮지 않을까...?

css, html까지 보여주면 길어질거 같고, js만 간략히 올려본다.

 

let resizeTimer; // 타이머를 저장할 변수
window.addEventListener('resize', function() {
  // 이미 예약된 타이머가 있다면 취소.
  clearTimeout(resizeTimer);

  // 사용자가 리사이즈를 멈춘 후 250ms 후에 새로고침.
  resizeTimer = setTimeout(function() {
    window.location.reload();
  }, 250);
});

우선 사용자의 화면 조정액션에 따른 리사이즈 기능을 하는 함수를 만들었다.

처음에는 사이즈 변동이 인지되면 새로고침을 하는 형태로 했었는데, 

생각해 보면 사용자의 화면 조정액션이 끝났을때에 새로고침을 하는게 리소스도 아끼고 

합당한 논리라고 생각되었다.

이로인해 슬라이드의 크기가 고정되지 않고, 동적으로 리사이즈 되어 슬라이드 ui의 기능을 보호할 수 있다.

 

const buttonLeft = document.querySelector('.button-left');
const buttonRight = document.querySelector('.button-right');

buttonLeft.addEventListener('click', () => {
  currentIndex--;
  currentIndex = currentIndex < 0 ? inners.length-1 : currentIndex; // index값이 0보다 작아질 경우 마지막으로 이동
  innerList.style.marginLeft = `-${outer.clientWidth * currentIndex}px`; // index만큼 margin을 주어 옆으로 밀기
});

buttonRight.addEventListener('click', () => {
  currentIndex++;
  currentIndex = currentIndex >= inners.length ? 0 : currentIndex; // index값이 inner의 총 개수보다 많아질 경우 0으로 초기화
  innerList.style.marginLeft = `-${outer.clientWidth * currentIndex}px`; // index만큼 margin을 주어 옆으로 밀기
});

다음으로 슬라이드 기능의 핵심로직이다. 

각각의 버튼에 클릭 액션이 일어나면, 슬라이드를 앞으로 당기거나 뒤로 미는 함수이다. 

원래는 가장 마지막이나, 초기에서 그 index를 벗어나려 하면, 그것을 막는 코드였지만, 

나는 슬라이드를 무한으로 넘길 수 있는 것을 원했기에 그 부분을 수정했다. 

그나저나 마진을 width에 index를 곱한 값으로 슬라이드를 처리하는 방법은 정말 참신한거 같다. 

 

결과

 

 

화면 사이즈를 마음대로 해도 슬라이드의 크기가 동적으로 재할당되어 비율을 유지한다. 

 

새로알게된것

슬라이드를 만드는 또 하나의 방법, 화면 사이즈에 유연한 ui

= 그래도 코드를 보면 대충 흐름은 읽을줄 알아서 망정이지, 너무 복잡하다.

  빨리 코틀린하고 싶다.

 

오늘은 부트캠프의 정식 스타트날이다. 12시간 커리큘럼은 졸리고 힘들고 뭉치고 아프다.

이걸 몇개월을 더하라고...? 하고 패닉에 빠졌다. 

내 허리는 어쩌라는건가. 접혀버릴거 같다.

 

 

 

 

참고된 소스: https://jforj.tistory.com/173