image carousel 구현

해당 프로젝트는 Vanilla JS에 TypeScript만을 사용한 프로젝트입니다.

구현 목적

이전에 image carousel를 사용할 때는 react-slick같은 라이브러리를 이용해서 쉽게 구현했습니다.
어차피 앞으로 사용할 때는 라이브러리에서 제공해주는 기능을 쓸거니까 한번쯤은 직접 구현해보면서 동작 원리를 고민하고 이해해보는게 좋지 않을까 생각해서 구현하게 되었습니다.

세팅

구현 방법을 설명하기 앞서 사용하는 용어를 먼저 정리하겠습니다.
1. .img-window: 이미지를 보여줄 엘리먼트
2. .img-container: 이미지들을 갖는 부모 엘리먼트
3. .img: 이미지를 백그라운드로 갖는 엘리먼트

• html

<div class="img-window">
  <div class="img-container">
    <figure class="img" style="background-image: url('')">
      <img src="" alt="" hidden />
    </figure>
    <figure class="img" style="background-image: url('')">
      <img src="" alt="" hidden />
    </figure>
    <figure class="img" style="background-image: url('')">
      <img src="" alt="" hidden />
    </figure>
    <!-- ...이미지들 -->
  </div>
</div>

<div class="btn-container">
  <button type="button" data-direction="1">이전 이미지</button>
  <button type="button" data-direction="-1">다음 이미지</button>
</div>

• css

.img-window {
  position: relative;
  width: 100%;
  min-width: 300px;
  max-width: 550px;
  padding-top: 100%;
  margin: 0 auto 0.6em;

  border-radius: 0.1em;

  overflow: hidden;
}
.img-window .img-container {
  position: absolute;
  inset: 0;
  margin: auto;

  display: flex;

  background-color: #000;
}
.img-window .img-container .img {
  width: 100%;
  height: 100%;
  
  display: inline-block;

  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

구현 방법

1. .img-container의 내부 이미지 개수 * 100%를 width로 .img-container의 크기를 등록 ( 이미지들을 한줄로 배치 )
2. insertBefore()를 이용해서 첫번째 이미지를 두번째 위치로 이동
3. translateX를 이용해서 -100% 이동해서 두번째 위치부터 보여주도록 설정
4. 좌/우측 이동 버튼을 클릭하면 방향에 따라서 translateX를 100%, -100%로 이동
5. 이동하고 나면 ( transitionend 이벤트 사용 ) 이동 방향에 따라서 이전 이미지를 마지막으로 / 마지막 이미지를 처음으로 이동 ( 좌/우측으로 무한으로 이동하기 위함 )

자세한 TS코드는 codepen를 참고해주세요.

후기

처음에는 어떤 방식으로 구현해야할지 막막했습니다.
구글링으로 찾아본 다음에는 원리는 알겠는데 이걸 어떻게 코드로 표현하지? 라는 생각을 하면서 일단 적으면서 생각해보자는 마음으로 시작했습니다.
이미지 배치/이동/순서 변경 등 모든게 처음에는 원하는 대로 안됐지만 계속 시도하면서 완성했습니다.

이전에는 동작 원리는 전혀 모른채 그냥 라이브러리에서 제공하는 방법만 사용해서 동작시켰는데 원리를 생각하면서 직접 만들어 보는게 좋은 경험이었습니다.