1

试图让 vue-awesome-swiper 在 nuxt 通用应用程序中工作。

我的包版本：

  • “刷卡器”：“^6.0.4”
  • "vue-awesome-swiper": "^4.1.1",

我注册了一个插件文件（全局注册指令）：vue-awesome-swiper.js

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

import 'swiper/swiper-bundle.css'

Vue.use(VueAwesomeSwiper /* { default options with global component } */)

然后是我的 nuxt.config.js：

 plugins: [
    { src: '~/plugins/vue-awesome-swiper', mode: 'client' },

然后是我的组件（全局注册指令）：componentSwiper

<template>
  <div v-swiper="swiperOption">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="1.jpg" alt="" />
      </div>
      <div class="swiper-slide">
        <img src="2.jpg" alt="" />
      </div>
      <div class="swiper-slide">
        <img src="3.jpg" alt="" />
      </div>
      <div class="swiper-slide">
        <img src="4.jpg" alt="" />
      </div>
      <div class="swiper-slide">
        <img src="5.jpg" alt="" />
      </div>
      <div class="swiper-slide">
        <img src="6.jpg" alt="" />
      </div>
      <div slot="button-prev" class="swiper-button-prev"></div>
      <div slot="button-next" class="swiper-button-next"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'componentSwiper',
  data() {
    return {
      swiperOption: {
        loop: true,
        slidesPerView: 3,
        spaceBetween: 30,
        autoplay: {
          delay: 5000
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  }
}
</script>

什么都没有动，什么也没有发生。我的幻灯片卡住了，所以我一定错过了什么？

4

4 回答 4

2

尝试将包的版本降级swiper到以前的版本。

  1. 在您的 package.json 文件中查找包并修改版本：
...

  "swiper": "5.4.5",
  "vue-awesome-swiper": "4.1.1",

...
  1. 停止 Nuxt 运行并运行npm install

在 Github 上查看此问题以获取更多信息：https ://github.com/surmon-china/vue-awesome-swiper/issues/680#issuecomment-655928225

于 2020-07-30T16:42:15.393 回答
0

使用本地注册和刷卡：“5.4.5”

import { directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
 
export default {
  directives: {
    swiper: directive
  }
}

如果您使用指令，导航按钮中插槽的使用无关紧要

于 2020-08-20T13:06:27.960 回答
0

请在 nuxt.config.js 中试试这个

plugins: [
 { src: '~/plugins/vue-awesome-swiper', ssr: false }
于 2020-07-28T06:23:35.943 回答
0

您可以通过 awesome-swiper-vue 上的 ref 实现导航：

  • "swiper": "^7.4.1",
  • "vue-awesome-swiper": "^4.1.1",

如果您的 swiper 组件带有这样的 ref：

<section ref="mySwiperRef" v-swiper:mySwiper="swiperOption">
  ...
  <section slot="button-next" class="swiper-button-next" @click="nextSlideItem"></section>
</section>

您可以通过以下方法访问幻灯片事件：

export default {
  ...
  data() {
    return {
      swiperOption: {
        slidesPerView: "auto",
        spaceBetween: 20,
        freeMode: true,
        navigation: {
          nextEl: ".swiper-button-next",
        },
      },
    };
  },
  methods: {
    nextSlideItem() {
      this.$refs.mySwiperRef.swiper.slideNext();
    },
  },
}

或者

this.$refs.mySwiperRef.swiper.slidePrev()
于 2022-02-02T19:21:46.680 回答