Vue) swiper 현재 이미지 슬라이드 index(번호) Callback함수로 받기

vue : 3.0.0,
swiper : 7.0.0

다음과 같이 코드를 사용하면 됩니다.
(앵간한 구글링, stackoverflower에서는 전부다 맞지 않아서 하나하나 값 찾아가면서 구현했습니다.)

Templelte

<templete>
  <swiper :options="swiperOption" @slideChange="slideChangeTransitionStart"  ref="mySwiper" class="swiper" style="width: 100%; z-index: 0;">
      <swiper-slide v-for="(value,index) in list" >

          <img style="width: 100%; height: 100%; object-fit: cover;" :src="value" >

      </swiper-slide>
  </swiper>
</templete>

 

computed

computed: {
    swiper() {
      return this.$refs.mySwiper;
    }
  },

Medtohd

  methods: {
    slideChangeTransitionStart(index) {
      console.log(index.activeIndex)
    },

  },

 

도움 되셨다면 하단의 광고 한번 클릭 부탁드립니다!!