我如何在Vue JS中使用swiper.js

如何解决我如何在Vue JS中使用swiper.js

我正在使用 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中使用swiper.js。希望你能帮助我，谢谢：）

解决方法

您是否在组件中导入了swiper？

// Import Swiper Vue.js components
import { Swiper,SwiperSlide } from 'swiper/vue';

export default {
    components: {
      Swiper,SwiperSlide,},...
}

, Swiper网站上的

Vue模块说：“ Swiper Vue.js组件仅与新的Vue.js版本3 兼容”。 Reference

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

仍然，有使用 Swiper 的选项。 vue-awesome-swiper 为我工作。

,

这似乎可行（在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 lang="scss">
  .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>