문제

https://github.com/user-attachments/assets/ddc1a79c-c721-47a4-93cd-2791f7872509

전체화면 비율에서는 왼쪽을 눌러도 다음 이미지를 보여주고 있다.

전체 화면 비율에서 오른쪽 두번 왼쪽 두번 클릭하여 이미지 슬라이더 박스의 좌표 정보, MouseEvent.clientX, 이미지 슬라이더 박스의 넓이의 중간값을 찍어본 것이다.
전체 화면 비율보다 작은 비율의 viewPort에서는 박스 넓이의 중간값 기준으로 오른쪽은 더 크고 왼쪽은 작게 찍히던 마우스 좌표값이 전체화면 비율에서는 이상하게 찍히고 있는 것을 발견했다.

해결

element.getBoundingClientReact 와 MouseEvent.clientX 는 좌표가 viewPort 기준 좌측 최상단을 기준으로 표시된다.
나는 이미지의 왼쪽과 오른쪽을 구분하는 기준을 이미지 크기의 절반인 크기를 기준으로 하여 절반값 보다 작으면 왼쪽, 절반값 보다 크면 오른쪽으로 하고 있다. 그래서 이미지 넓이의 절반을 기준으로 왼쪽과 오른쪽을 구분하기 위해서는 clientX좌표값에 이미지 좌표값을 빼서 clientX 좌표값의 기준이 viewPort 기준이 아닌 이미지 기준으로 되도록 설정해야 사이드 이펙트가 발생 안한다.

참고 및 출처1
참고 및 출처2