vue-carousel with fraction

기존 사용하던 vue slider에서 기존에 없는 fraction을 추가해보았다.

기존 사용 중이던 slider - https://ssense.github.io/vue-carousel/

Vue Carousel

 

다른 슬라이더와 비교해서 딱히 두드러지는 장점은 없지만 해상도에 따라 슬라이드 개수를 설정할 수 있는 api가 있어 반응형 프로젝트 구현 시 좀 편하게 사용했다.

 

<carousel @pageChange="pageChagne">
  <slide
    v-for="(item, index) in slides"
    :key="index"
  >
  ...
  </slide>
</carousel>
<div>{{ `${currentIndex} / ${slides.length}`}}</div>

 

그냥 carousel 컴포넌트에 pageChange 이벤트를 추가하고 변경될 때마다 index가 변경되도록 적용하였다.

data() {
  return {
    currentIndex = 1;
  }
},
methods: {
  pageChange(index) {
    this.currentIndex = index +1;
  }
}

첨엔 참고 url에 나와있는 첫번째 방법인 ref를 이용해서 해보려고 했는데 this.$refs."ref값"이 undefined 나와서 실패!!

 

물론 이렇게 해결되고 나니 이해는 가는데... 이게 해설지를 봐야지만 답을 알 수 있다는... 큰 단점이...

 

후... 공부나 하쟈..

 

 

참고.

https://github.com/SSENSE/vue-carousel/issues/80