[SOLVED] F7 vue how to make swiper trigger function call

Questions
1

Hi, I was searching this over 2days…

I am wondering how do we make swiper to trigger function when i swipe it left or right in Vue
I am trying to make function call when i swipe slide left or right

I know we can pass some additional parameters like

Slide 1
Slide 2
Slide 3

But this document is not enough…

anybody??

2

Hi you can use this events

slideNextTransitionStart Same as “slideChangeTransitionStart” but for “forward” direction only
slideNextTransitionEnd Same as “slideChangeTransitionEnd” but for “forward” direction only
slidePrevTransitionStart Same as “slideChangeTransitionStart” but for “backward” direction only
slidePrevTransitionEnd Same as “slideChangeTransitionEnd” but for “backward” direction only

http://idangero.us/swiper/api/

1 Like
3

Thank you for your tips,
I actually tried it and it worked.
but the problem is I need to change the value of this.something.
I mean i was able to do some alert or consloe.log and it all worked but somehow it could not access
the value of this.something.

below has a log of undefined

export default {
name: ‘scheduleMonth’,
components: {DatePick},
data () {
return {
month: new Date().getMonth() + 1
}
},
methods: {
getSwiperInstance () {
this.mySwiperInstance = this.$f7.swiper.get(’.swiper-container’)
this.mySwiperInstance.on(‘slideNextTransitionStart’,function() {
console.log(this.month)
});
}
}
};

4

Save your instance in a var before calling inside the swiper on function
methods: {
getSwiperInstance () {
let vm = this
this.mySwiperInstance = this.$f7.swiper.get(’.swiper-container’)
this.mySwiperInstance.on(‘slideNextTransitionStart’,function() {
console.log(vm.month)
});
}
}

5

Thanks man, you got me.

:grinning::grinning::grinning:

1 Like