캐러셀(Carousel)

 

캐러셀(Carousel)은 위와 같이 컨텐츠를 슬라이드 형태로 순회하며 표시하는 UI를 말한다.

 

이때 무한 루핑 기능이 가능하기 위해서는 처음에 이미지 슬라이드에서 이전 버튼을 클릭할 시 마지막 슬라이드로 이동을 하고

반대로 마지막 슬라이드에서 다음 버튼을 클릭할 시 처음 슬라이드로 이동을 해야 한다.

 

이를 위해 본래 준비된 총 4장의 이미지 이외에 처음 나오는 이미지와 마지막에 나오는 이미지를 각각 복사하여 자료구조의 양 끝에 

위치시킨다.

 

결과적으로 슬라이드 이미지의 정보를 담고 있는 자료구조의 맨 처음 이미지는 마지막 슬라이드 이미지이고 마지막 이미지는 처음

슬라이드 이미지가 적재된다. 

$container.addEventListener('click', e => {
    if(!e.target.classList.contains('carousel-control')) return;
      if(e.target.classList.contains('next')) { //다음 버튼을 눌렀을 경우
        slides.style.setProperty('--currentSlide', ++currentSceneNum); //현재 씬에 맞게 이동
        slides.style.setProperty('--duration', 500);
        if(currentSceneNum > 5) { //현재 씬 인덱스가 마지막일 경우
          slides.style.setProperty('--currentSlide', 1);
          slides.style.setProperty('--duration', 0);
          currentSceneNum = 1; // 현재 씬 인덱스를 다시 처음 씬에 대응하는 인덱스로 초기화
        }
      } else { //이전 버튼을 눌렀을 경우
        slides.style.setProperty('--currentSlide', (--currentSceneNum));
        slides.style.setProperty('--duration', 500);
        if(currentSceneNum < 0) { //현재 씬 인덱스가 처음일 경우
          slides.style.setProperty('--currentSlide', 4); //마지막 씬에 대응하는 인덱스로 초기화
          slides.style.setProperty('--duration', 0);
          currentSceneNum = 4;
        }
      }
  })

이때 일반적으로 앞뒤로 움직이는 상황이 아닌 맨 처음이나 맨 마지막에서 이동할 경우에는 transition의 duration 값은 0으로 줘야지

사용자 시점에서는 슬라이드가 이동이 되었는지 가시적으로 인지 못하게 할 수 있다.

 

transitionend Event

무한 루핑 기능을 구현하기 위해서 Click 이벤트 내에서 처리해야 될 조건 연산들이 너무 많아져서 코드의 효율성도 부족하고 가독성도 떨어졌다. 위의 코드를 대신에 transitionend 이벤트를 사용하고자 한다.

transitionend는 전환 상태를 전환 완료로, 기본 또는 비 전환 상태로 완전히 되돌아 간다 - 이벤트가 양방향으로 발생합니다. 

$container.ontransitionend = () => {
    isMoving = false;

    // currentSlide === 0, 즉 선두에 추가한 클론 슬라이드면 currentSlide += images.length로 image의 마지막(images.length)으로 이동
    // currentSlide === images.length + 1, 즉 마자막에 추가한 클론 슬라이드면 currentSlide -= images.length로 image의 선두(1)로 이동
    // 클론 슬라이드가 아니면 currentSlide += 0으로 이동하지 얺는다.
    const delta = currentSlide === 0 ? 1 : currentSlide === images.length + 1 ? -1 : 0;

    // 클론 슬라이드가 아니면(delta === 0) 이동하지 않는다.
    if (!delta) return;

    currentSlide += images.length * delta;
    move(currentSlide);
  };
};