Carousel Slider

해당 포스트는 제로베이스 오프라인스쿨 진행 과정 중 JS PairProgramming과제를 진행하며 회고를 정리하는 글이다.

10. Carousel Slider TIL
1. transition

const setSlideNext = slideLength => {
  if (slideIndex === slideLength + 1) return;

  slideIndex += 1;
  setSlide(slideIndex);
  setTransition(TRANSITIONDEFAULT);
};

const checkSlideMove = slideLength => {
  if (slideIndex === slideLength + 1) {
    setTransition(0);
    slideIndex = 1;
    setSlide(slideIndex);
  }
};

이러한 setSlideNext 함수와 checkSlideMove 함수가 있다고 하자. setSlideNext 함수는 다음 image로 넘어가는 함수이고, checkSlideMove는 마지막 image에 도달했을 때, 다시 두번째 image로 이동시키는 함수이다.

document.querySelector('.next').addEventListener('click', () => {
  setSlideNext(images.length);
  checkSlideMove(images.length);
});

위 코드에서는 carousel이 6번째 image로 넘어가지 않는 것처럼 보인다.

0.5초 transition이 일어나기 전 checkSlideMove 함수가 실행되면서 transition이 없어지고 2번째 image로 넘어간다.

따라서, transition이 일어날 시간을 충분히 확보해야 한다.

document.querySelector('.carousel-slides').addEventListener('transitionend', () => {
  checkSlideMove(images.length);
});

document.querySelector('.next').addEventListener('click', () => {
  setSlideNext(images.length);
});

transidionend 이벤트를 이용해 transition이 일어난 후에, checkSlideMove 함수가 실행되도록 한다.

✔ transitionend event

css transition이 끝날 때 발생되는 event다. transition이 끝나기 전 제거되거나, display가 none인 경우에는 발생하지 않는다. 또한, transitioncancel event가 발생해 transition이 취소된 경우에도 발생하지 않는다.

transitionend event는 기본상태에서 변화된 상태, 변화된 상태에서 기본상태, 양방향으로 발생한다.
https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionend_event

2. isTransitioning
요구사항에 따라 carousel은 슬라이드 이동 버튼을 연타해도 이상없이 동작해야 한다.

transition 중에 다음 image로 넘어가는 것을 막기 위해 isTransitioning이라는 상태를 만들었다.

1번과 같은 코드에서 isTransitioning을 추가했다.

let isTransitioning = false;

const setSlideNext = slideLength => {
  if (slideIndex === slideLength + 1 || isTransitioning) return;

  setTransition(TRANSITIONDEFAULT);
  slideIndex += 1;
  setSlide(slideIndex);

  isTransitioning = true;
};

const checkSlideMove = slideLength => {
  if (slideIndex === slideLength + 1) {
    setTransition(0);
    slideIndex = 1;
    setSlide(slideIndex);
  }

  isTransitioning = false;
};

document.querySelector('.carousel-slides').addEventListener('transitionend', () => {
  checkSlideMove(images.length);
});

document.querySelector('.next').addEventListener('click', () => {
  setSlideNext(images.length);
});

carousel은 가장 처음에 transition을 하지 않기 때문에 isTransitioning을 false로 초기화 했다.

이후, click event가 발생할 때마다 호출되는 setSlideNext 함수에서 isTransitioning을 검사한다. 만약, trure라면 아직 transition 중이므로 return 된다.

이후, transition이 끝나는 event인 transitionend event에서 isTrasitioning을 false로 만들어주며 transition이 끝났음을 알린다.

3. offsetWidth(height) vs clientWidth(height)
element.offsetWidth는 margin을 제외한, padding, border값까지 계산한 값을 가져온다.

element.clientWidth는 margin과 border값이 제외된 padding값까지만 적용된 내부의 실제 크기를 가져온다.
carousel요소의 Width 셋팅하기 위하여 image로 부터 Width를 가져와야 한다.

 

이에 선택한 방법은 offsetWidth를 사용하여 Width를 셋팅 하였다.

해당 과제에 CSS는 box-sizing: border-box로 계산을 하기 때문에 이미지의 border가 있을 경우를 대비하여 border값 까지 포함하여 width를 가져오기 위해 offsetWidth를 사용하였다.

<배운점>
++ 해당 과제를 진행하며 슬라이드를 어떻게 자연스럽게 이동시켜 보여줄 수 있는지에 대한 로직을 고민하는 시간이 꽤 소요되었다. index.html에 지정되있는 img 요소들이 나열 되어 있는 순서에서 자연스럽게 보여지게 하기 위해 첫번째 img요소와 마지막 img요소를 기점으로 index를 이동시켜 마치 4개의 img요소들이 무한으로 반복되는 듯한 효과를 줄 수있게 하는 로직을 생각해보았고 실제로 생각한 대로 구현이 되어 큰 만족감을 얻었다.

++ offsetWidth와 clicentWidth 중 어떤 것을 쓸지 고민하는 과정에서, CSS를 이해할 수 있는 기본적인 지식이 필요하다고 생각했다.