【Nuxt.js】「vue-awesome-swiper」でスライドが変わると同時に発火させたい
解決したいこと
「vue-awesome-swiper」の表示スライドと連動して記載内容が変わるようなものを実装したいです。
「activeIndex」から表示中スライドのページを取得可能だということは分かったのですが、
スライドが動く度に値を更新させる方法が分からず苦戦しています。
使用中のコード
pages/index.vue
<template>
<div>
<swiper ref="mySwiper" :options="swiperOptions">
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
<swiper-slide>Slide 4</swiper-slide>
<swiper-slide>Slide 5</swiper-slide>
<div slot="pagination" class="swiper-pagination"></div>
<div slot="button-prev" class="swiper-button-prev"></div>
<div slot="button-next" class="swiper-button-next"></div>
</swiper>
</div>
</template>
<script>
export default {
name: 'Carrousel',
data() {
return {
swiperOptions: {
pagination: {
el: '.swiper-pagination',
clickable: true,
},
slidesPerView: 1,
centeredSlides: true,
spaceBetween: 5,
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
onSlideChangeEnd() {
this.onSwipe()
},
},
}
},
computed: {
swiper() {
return this.$refs.mySwiper.$swiper
},
},
methods: {
onSwipe() {
console.log('Get ready to see the slide you are in')
console.log(this.$refs.mySwiper.$swiper.activeIndex)
},
},
}
pages以外
https://github.com/surmon-china/vue-awesome-swiper
に沿って書いてます。
plugins/vue-awesome-swiper.js
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper /* { default options with global component } */)
nuxt.config.js
plugins: [{ src: '@/plugins/vue-awesome-swiper.js', ssr: false }],
補足
プログラミング初学者につき、不適切な表現等あればご指摘いただけると幸いです、、、
0
