[Vue] Swiper 미적용 해결 및 사용기

이번에도 토이프로젝트 진행과정중에서 발생했던 겪었던 문제 중 하나에 대해서 다뤄보려고 합니다.

https://programming.vip/docs/jquery-plug-ins-commonly-used-plug-in-libraries.html

화면을 마우스로 당겨서 넘기게 해주는 라이브러리입니다.

블라인드에서 해당 부분처럼 당겨서 밀어내는 방식을 사용하길래 찾던 중 알게된 것이 swiper입니다.

https://swiperjs.com/

처음에 공식문서에 나와있는 그대로 코드를 프로젝트에 적용해봤지만 적용이 안되는 현상이 있길래 또 당황...

 

 

 

결과적으로는 또 vue의 버전과 맞지않는 문제가 발생해서 vue2에서는 현재(2021.08.19 기준) swiper의 버전이 swiper6버전이 맞지 않아서 swiper 5버전대를 받아서 사용하였습니다.

https://swiperjs.com/vue

Swiper Vue.js Components

또 놓쳐버린 공식문서의 중요성....

사용되는 예제 소스는 공식홈페이지에 자세하게 나오기 때문에 포스팅에서는 따로 소스코드는 첨부하지는 않겠습니다.

혹시나 저처럼 swiper js에서 적용이 안되는 오류를 만나게 된다면 swiper5버전대(저는 5.3.7버전을 사용하였습니다)로 변경하시면 되겠습니다.