我如何在vue js中使用swiper.js

Question

我正在使用yarn add swiper安装 swiper.js这是我的代码，但它没有显示任何幻灯片或其他内容<swiper   :slides-per-view="3"   :space-between="50"    @swiper="onSwiper"    @slideChange="onSlideChange">    <swiper-slide>Slide 1</swiper-slide>    <swiper-slide>Slide 2</swiper-slide>    <swiper-slide>Slide 3</swiper-slide> </swiper>错误是这样的[Vue warn]: Failed to mount component: template or render function not defined.found in---> <Swiper>       <DetailProduct>         <App> at src/App.vue           <Root>这是我对 package.json 的依赖"dependencies": {    "bootstrap": "^4.5.3",    "bootstrap-vue": "^2.18.1",    "core-js": "^3.7.0",    "node-sass": "^4.14.1",    "numeral": "^2.0.6",    "sass-loader": "^10.0.5",    "swiper": "^6.3.5",    "vue": "^2.6.11",    "vue-router": "^3.4.9",    "vue-toast-notification": "^0.5.4",    "vuex": "^3.4.0"  }我如何在 vue.js 中使用 swiper.js？希望你能帮助我谢谢:)

Answer 1

Swiper 网站上的 Vue 模块表示“ Swiper Vue.js 组件仅与新的 Vue.js 版本 3 兼容”。参考

你package.json显示你的Vue版本是2.6.11

尽管如此，还是可以选择使用Swiper。vue-awesome-swiper为我工作。

Answer 2

您在组件中导入了 swiper 吗？

// Import Swiper Vue.js components

import { Swiper, SwiperSlide } from 'swiper/vue';

export default {

    components: {

      Swiper,

      SwiperSlide,

    },

    ...

}

Answer 3

这似乎有效（在 Nuxt v2.14 中），但我不认为这是推荐的方式

家长

<Swiper

  :options="carouselOptions"

 />

孩子

<template>

  <div v-if="options" ref="swiper" class="carousel-hero carousel-hero--is-hidden swiper-container">

    <div class="carousel-hero-wrapper swiper-wrapper">

      <div

        v-for="n in 5"

        :key="n"

        class="carousel-hero__slide slide swiper-slide"

      >

        <img

          src="https://via.placeholder.com/1680x720"

          class="slide__image"

          style="max-height: 100px;"

        />

        <div class="slide__content">

          <h4 class="slide__heading">Heading {{ n }}</h4>

          <p class="slide__description">Description {{ n }}</p>

          <a

            href="#"

            class="slide__button"

          >

          Learn more {{ n }}

          </a>

        </div>

      </div>

    </div>

    <div class="swiper-pagination"></div>

    <div class="swiper-button-prev"></div>

    <div class="swiper-button-next"></div>

    <div class="swiper-scrollbar"></div>

  </div>

</template>

<script>

import Swiper, { Navigation, Pagination } from 'swiper';

Swiper.use([Navigation, Pagination]);

import 'swiper/swiper-bundle.css';

export default {

  name: 'Swiper',

  props: {

    options: {

      type: Object,

      default: () => {

        return {

          slidesPerView: 1

        }

      }

    }

  },

  data() {

    return {

      swiper: null,

    }

  },

  created() {

    console.log('Swiper', Swiper);

  },

  mounted() {

    let vm = this;

    if (this.options && vm.$refs.swiper !== 'undefined') {

    // or if (this.$el && this.options) {

      vm.$refs.swiper.classList.remove('carousel-hero--is-hidden');

      this.swiper = new Swiper(vm.$refs.swiper, {

      // or this.swiper = new Swiper(this.$el, {

        slidesPerView: this.options.slidesPerView,

        navigation: {

          nextEl: '.swiper-button-next',

          prevEl: '.swiper-button-prev',

        },

        on: {

          init: function () {

            console.log('swiper initialized');

          },

          resize: function () {

            console.log('resize');

          }

        }

      });

    }

  },

  methods: {

  }

};

</script>

<style scoped>

  .carousel-hero {

    &--is-hidden {

      display: none;

    }

    &-container {

      @include make-container();

      @include default-max-widths();

      max-height: 200px !important;

      overflow: hidden;

    }

    &-row {

      @include make-row();

      padding: rem(25px 0);

      justify-content: center;

    }

    &-column {

      @include make-col-ready();

    }

    border: 10px solid red;

    &-wrapper {

    }

    &__slide {

    }

    .slide {

      &__image {

        @include img-fluid();

      }

      &__content {

        border: 1px solid blue;

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

        width: 100%;

        height: 100%;

        @include media-breakpoint-up(lg) {

          max-width: 85%;

          max-height: 85%;

        }

      }

      &__heading {

        font-size: rem(48px);

      }

      &__description {

      }

      &__button {

      }

    }

  }

</style>