[Swiper.js 에러] 하나 스와이프시 다른 스와이퍼도 움직일 때

문제. swiper/react 사용시 다른 스와이퍼까지 함께 움직이거나 버벅이는 현상 발생

실무에서 페이지 하나에 많은 스와이퍼 컴포넌트를 사용하는 사례가 있었다. 이 때, 신기하게도 핸드폰 웹뷰등으로 잘못 드래그(스와이핑)하면, 스와이퍼 아이템이 애매하게 스와이프되어 멈추거나, 화면 내의 다른 swiper 까지 함께 움직이거나 버벅이는 현상이 발생했다.

swiper/react에서 한페이지에서 여러개의 스와이프 사용할 때, 다른 스와이퍼를 드래그하면 또 다른 스와이퍼까지 움직이며 버벅이는 에러가 발생했다.

 

문제 발생 정보

• swiper : 9.0.5 버전
• react: 17.0.2 버전

 

 

해결. swiper.js 내의 overflow:hidden을 제거 하고, 부모 HTML 태그에 overflow:hidden 적용

사용하고 있는 UI 스타일과 뭔가 겹치는 문제가 발생했던 것일까? swiper.js 에 적용되어 있는 overflow:hidden을 unset 하고 여러 swiper를 감싸는 부모 태그에 overflow:hidden을 적용하니 더이상 스와이프 동작이 다른 스와이퍼에 영향을 끼치지 않았다.

<div style={{ overflow:'hidden' }} >
  <Swiper style={{ overflow: 'unset' }}>
    {list?.map((item, index: number) => {
      return (
        <SwiperSlide
          key={index}
        >
          {render(item, index)}
        </SwiperSlide>
      )
    }
  </Swiper>
</div>