728x90
반응형

개발/Nuxt.js

Nuxt.js에서 vue-awesome-swiper loop pagination 버그 해결하는 방법

라이브러리 버전 vue-awesome-swiper@4.1.1 swiper@5.4.5 Nuxt.js에서 vue-awesome-swiper를 활용해서 swiper 페이지네이션(pagination) 기능을 구현할 수 있는데요. 구현하려는 의도는 아래와 같습니다. 하지만 swiper 이벤트에 vue 컴포넌트 데이터 변이 로직을 넣으니까 위 의도대로 동작하지 않았는데요. 증상은 아래와 같습니다. swiper에서 제공하는 페이지네이션을 누르자 2번째 슬라이드에서 3번째 슬라이드로 넘어가는 도중 이상한 버그가 발생하여 처음 의도와는 다르게 동작한다는 사실을 발견하게 되었습니다. 구현된 코드 nuxt에서 vue-awesome-swiper를 사용한 코드는 아래와 같습니다. {{ n }} export default { d..

2020.12.01 게시됨

개발/Vue

vue-awesome-swiper Loop + Autoplay + Pagination 적용하기

Swiper 라이브러리에서 무한루프(loop), 페이지네이션(pagination), 자동재생(autoplay)를 유기적으로 버그없이 잘 동작하게 구현하는 것은 생각보다 까다로울 수 있습니다. 이번 포스팅에서는 Swiper 라이브러리를 활용해서 3가지 기능의 타이밍을 정확하게 제어하여 Carousel Slider 기능을 구현해보도록 하겠습니다. 라이브러리 버전 vue-awesome-swiper@4.1.1 swiper@5.4.5 구현할 최종 결과물 우리가 구현할 최종 결과물은 아래와 같습니다. 코드 vue-awesome-swiper를 활용해서 구현한 예시는 아래 코드와 같습니다. // template code {{ n }} v-swiper를 적용하는 태그에 v-once 디렉티브를 같이 적용해야 됩니다. v-..

2020.12.01 게시됨

728x90
반응형