[JS] owl carousel 문제 해결하기

owl carousel 사용배경

owl carousel을 적용했는데 부트스트랩이 아닌 carousel를 사용해보고 싶은 마음이 들었다. 그리고 html 상에 carousel 코드 적용이 간단해서 적용해보기로 했다.

issue 사항 1 - 마우스휠 적용 문제

owl carousel 적용시 마우스휠 demo를 사용했다. 여기서 마우스휠을 위로 하던지 아래로 하던지 계속 같은 방향으로 이미지가 넘어가는 issue 였다.

 

해결방안

stackoverflow에서 정답을 찾았는데, jquery를 사용하고 있어서 e.deltaY가 안될 수 있다는 것이었다. jquery에서는 e.originalEvent.deltaY와 같이 사용해야 적용이 된다. console.log(e.deltaY)를 찍어보면 undefined라고 나오고 적용이 안된다는 것을 알 수 있었다.

issue사항 2 - 모달창 첫번째 이미지 선정

owl carousel을 각각의 모달창에서 여러개 사용하고 있었는데, 한 모달창에서 마우스휠로 넘긴 것이 다른 모달창을 열었을 때 반영되서 1번 이미지부터 나오지 않고 중간부터 시작됐다. 원하는 것은 모달창을 열었을 때 무조건 1번 이미지부터 보이게 하는 것이었다.

 

해결방안

가장 도움이 된 것은 역시 owl carousel 페이지에서 제공하는 API를 다시 살펴보는 것이다. refresh나 destroy로 해결했다는 글도 봤지만,

owl.trigger('to.owl.carousel', [0]);

tragger를 이용해서 to.owl.carousel을 적용하는 것이 제일 좋은 해결책이었다. 모달창이 열렸을 때, carousel에 img 중 [0]의 img를 모달창에 보일 수 있도록 하는 API다.

 

---

 

Cloned items in owl carousel - Stack Overflow

javascript - Set active item in owlCarousel - Stack Overflow

Bootstrap Modal 입력값 초기화 - Yun Blog | 기술 블로그

javascript - Refreshing Owl Carousel 2 - Stack Overflow

Events | Owl Carousel | 2.3.4

<plugin> Owl Carousel (2) -API :: 사소한 메모장

How to change start position on mobile for Owl Carousel - Stack Overflow

마우스 휠로 전체 페이지 영역 넘기기

javascript - event.wheelDelta returns undefined - Stack Overflow

[jQuery] mousedown(), mouseup() : 네이버 블로그