swiper を vueで使うときの現在のスライド番号の取得
はじめに
electronとvueを使って、デスクトップアプリを作る際、スライドショーが必要になったので、
swiperを入れて作ってみたところ、現在いるスライド番号を取得したくて調べていたら、
どの方法もうまくいかず、今回のこの方法でうまくいったので備忘録的に書きました。
環境
- vue 3.0.0
- swiper 6.8.4
- electron 13.0.0
取得方法
hoge.vue
<template>
<div>
<swiper
v-on:swiper="onSwiper"
v-on:slideChange="onSlideChange">
<swiper-slide>slide1</swiper-slide>
<swiper-slide>slide2</swiper-slide>
</swiper>
</div>
</template>
<script>
import {Swiper,SwiperSlide} from "swiper/vue"
import "swiper/swiper-bundle.min.css"
export default{
name:'hoge',
components:{Swiper,SwiperSlide},
data(){
return{
swiper:null
}
}
methods:{
onSwiper(_swiper){
this.swiper = _swiper
}
onSlideChange(){
console.log(this.swiper.activeIndex)
}
}
}
</script>
<template>
<div>
<swiper
v-on:swiper="onSwiper"
v-on:slideChange="onSlideChange">
<swiper-slide>slide1</swiper-slide>
<swiper-slide>slide2</swiper-slide>
</swiper>
</div>
</template>
<script>
import {Swiper,SwiperSlide} from "swiper/vue"
import "swiper/swiper-bundle.min.css"
export default{
name:'hoge',
components:{Swiper,SwiperSlide},
data(){
return{
swiper:null
}
}
methods:{
onSwiper(_swiper){
this.swiper = _swiper
}
onSlideChange(){
console.log(this.swiper.activeIndex)
}
}
}
</script>
Swiperの初期設定を知らせる v-on:swiper
で、onSwiper
が呼び出され、Swiperの情報が _swiper
変数に入るので、それを this.swiper
に移して、vueの中で参照できるようにする。
スライドの遷移を知らせる v-on:slideChange
で、onSlideChange
が呼び出されるので、this.swiper.activeIndex
と記述すれば、現在のスライド番号を取得できる。
うまくいかなかった方法
各ライブラリのバージョンによるものや、ライブラリがそもそも違うかもしれませんが、
<swiper>
タグに ref='mySwiper'
という感じで ref
を追加して、this.$refs.mySwiper.activeIndex
とか、this.$refs.mySwiper.swiper.activeIndex
とか、this.$refs.mySwiper.$swiper.activeIndex
など色々と試してみたんですが、どれも undefined
となってしまいました。
参考サイト
Author And Source
この問題について(swiper を vueで使うときの現在のスライド番号の取得), 我々は、より多くの情報をここで見つけました https://qiita.com/kaluna/items/63582508b6557c2ee539著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .