[Vue.js] Bootstrap Autoplaying Carousel 오작동 문제

1. Bootstrap Autoplaying Carousel 오작동 문제

https://getbootstrap.com/docs/5.3/components/carousel/#autoplaying-carousels

위 링크는 부트스트랩 캐로우셀 자동 슬라이드 예제이다. 핵심은 data-bs-ride 속성에 "carousel"을 적용하면 캐로우셀의 슬라이드가 자동으로 넘어간다. 이 코드를 Vue.js 프로젝트에 적용했는데 오작동 문제가 발생했다.

해당 페이지를 처음 열었을 때는 슬라이드가 정상적으로 동작하는데 다른 페이지에 다녀오면 멈춰 있다. 다음 버튼을 클릭하면 그제야 슬라이드가 동작하기 시작한다. 사용자의 버튼 이벤트 발생 시 자동 플레이가 되는 옵션은 "carousel"이 아니라 "true"이며 나의 경우 분명히 "carousel" 옵션을 주었다. 그런데 왜...?

 

2. 컴포넌트가 만들어질 때 클릭 이벤트 일으켜 문제 해결

Autoplaying Carousel로 작동하도록 해결한 아이디어는 컴포넌트가 마운트 될 때 캐로우셀의 다음 슬라이드로 넘어가도록 하는 버튼에 클릭 이벤트를 주는 방식이었다. 라이프 사이클 훅에서 mounted, created에서 클릭 이벤트를 일으키면 될 것 같았다. 그래서 아래 코드를 각각 추가해 보았는데 created에 적용한 경우만 동작하였다.

created() {
    this.getDashBoard()
    this.$nextTick(() => {
      const nextButton = this.$refs.nextButton
      if (nextButton) {
        nextButton.click()
      }
    })
  },

아래 코드는 <template> 태그의 캐로우셀 버튼이다. 위 코드와 연동하기 위해 ref 속성을 추가하면 된다.

<button
  class="carousel-control-next"
  style="right: -0.8rem; width: auto"
  type="button"
  data-bs-target="#carouselExampleControls"
  data-bs-slide="next"
  ref="nextButton"
>
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="visually-hidden">Next</span>
</button>