我如何在 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？

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

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

Answer 2

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

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

不过，还有使用 Swiper 的选项。 vue-awesome-swiper 对我有用。

Answer 3

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

Parent

<Swiper
  :options="carouselOptions"
 />

Child

<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>

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

How can i using swiper.js in vue js

javascript

vue.js

swiper

swiper.js