[이슈해결노트]embla-carousel next-button 오류

1. 문제상황

동영상과 같이 스크롤이 마지막 이미지까지 갔음에도 불구하고 next-button이 안없어지는 현상 발견

1. 원인파악

embla-carousel에 **canScrollNext method**로 ****next로 넘어갈 콘텐츠가 없을 때, next 버튼이 나오는 지 안나오는 지 확인해서 true/false로 반환하는 값을 알아내 disabled를 처리하면 되게끔 되어있다.

하지만 위의 동영상과 같은 경우, 계속 canScrollNext의 값이 true로 나오며 작동을 정상적으로 못하는 것을 발견했다.

• 참고 embla-carousel

setNextBtnEnabled(embla.canScrollNext());  // 결과값: true;

1. 문제 해결

원하는 기능은 next 버튼이 마지막 콘텐츠에 닿을 때, 버튼이 안나타나게 하는것이다.

그래서 생각해낸 것은 마지막 콘텐츠 인덱스를 찾아내 스크롤한 column의 길이와 비교해 총 길이와 콘텐츠의 마지막 인덱스가 같을 때, 버튼을 사라지게 하는 방법을 생각했다.

// 스크롤하고 있는 뷰의 콘텐츠 인덱스를 배열로 넣음 
const viewIndexs = embla.slidesInView(); 
// 스크롤한 뷰의 콘텐츠 중 마지막 인덱스를 찾음
const lastViewIndex = viewIndexs[viewIndexs.length - 1];
// 스크롤한 전체 콘텐츠의 총 길이와 마지막 인덱스가 같을 때 next button을 없앰
    if (total === lastViewIndex + 1) {
      setNextBtnEnabled(false);
    }