私はvue-awesome-swiperを使用しており、次の手順に従っています: https://github.com/surmon-china/vue-awesome-swiper 。このプラグインをNuxt jsでグローバルに登録することを選択しました。
[〜#〜]問題[〜#〜]:Devは完全に機能し、スライドは各ページにあり、ナビゲーションは機能します。一方、作品には1ページ目にすべてのスライドがあり、すべてのスライドが最初のページにあるため、ナビゲーションはここで機能し、他のページは空白のままになります。
これらは私のファイルです:
plugins/VueAwesomeSwiper.js
import Vue from 'vue';
import VueAwesomeSwiper from 'vue-awesome-swiper';
// import style
import 'swiper/css/swiper.css';
Vue.use(VueAwesomeSwiper);
nuxt.config.js
...
css: [], <--- Do I need to add something to add here?
plugins: [
{ src: '~/plugins/VueAwesomeSwiper.js' },
]
...
TheSlider.vue
<template>
<div>
<swiper class="swiper" :options="swiperOption">
<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>
<swiper-slide>Slide 6</swiper-slide>
<swiper-slide>Slide 7</swiper-slide>
<swiper-slide>Slide 8</swiper-slide>
<swiper-slide>Slide 9</swiper-slide>
<swiper-slide>Slide 10</swiper-slide>
<div slot="button-prev" class="swiper-button-prev"></div>
<div slot="button-next" class="swiper-button-next"></div>
</swiper>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component
export default class TheSlider extends Vue {
swiperOption = {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
};
}
</script>
<style>
</style>
何が悪いのかわかりません。誰か助けてもらえますか?ありがとう!
私は次のように変更しました:
<div v-swiper="swiperOption">
<div class="swiper-wrapper">
<div class="swiper-slide">
Render original HTML in server, render Swiper in browser (client)
</div>
</div>
</div>
from https://github.com/surmon-china/surmon-china.github.io/tree/source/projects/vue-awesome-swiper/nuxt
そしてそれは働いた。