【Nuxt.js】「vue-awesome-swiper」でスライドに合わせて表示する内容を変えたい
解決したいこと
Nuxt.jsで、表示されているスライダーの動きに合わせて
スライダー外の記述も変わる機能を実装したいのですが、
現在使用しているvue-awesome-swiperの表示中スライドをどう取得していいのか分からず苦戦しています。
vue-awesome-swiperに強いこだわりはないので、
他のものを使った方法でも何かご教示頂けると助かります。
試した事
下記の {{ current }} に、
表示しているスライドに対応した数字を入れられるかと思い試してみましたが、
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>
{{ current }}
</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',
},
current: [],
},
}
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper
},
},
mounted() {
// eslint-disable-next-line no-console
console.log('Current Swiper instance object', this.swiper)
this.current = this.swiper.activeIndex
},
}
</script>
「Cannot read property '$swiper' of undefined」
エラー文が出て来て検証できません。
「$」を消しても同様のエラーが出ます。
一応computed と mounted を消せばスライダーとしては動きますが、
このままでは表示しているスライダーに対応する情報を取り出せません。
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