我如何在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 componentsimport { Swiper, SwiperSlide } from 'swiper/vue';export default {&nbsp; &nbsp; components: {&nbsp; &nbsp; &nbsp; Swiper,&nbsp; &nbsp; &nbsp; SwiperSlide,&nbsp; &nbsp; },&nbsp; &nbsp; ...}

Answer 3

这似乎有效（在 Nuxt v2.14 中），但我不认为这是推荐的方式家长<Swiper&nbsp; :options="carouselOptions"&nbsp;/>孩子<template>&nbsp; <div v-if="options" ref="swiper" class="carousel-hero carousel-hero--is-hidden swiper-container">&nbsp; &nbsp; <div class="carousel-hero-wrapper swiper-wrapper">&nbsp; &nbsp; &nbsp; <div&nbsp; &nbsp; &nbsp; &nbsp; v-for="n in 5"&nbsp; &nbsp; &nbsp; &nbsp; :key="n"&nbsp; &nbsp; &nbsp; &nbsp; class="carousel-hero__slide slide swiper-slide"&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; <img&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; src="https://via.placeholder.com/1680x720"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="slide__image"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style="max-height: 100px;"&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; <div class="slide__content">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4 class="slide__heading">Heading {{ n }}</h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p class="slide__description">Description {{ n }}</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; href="#"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="slide__button"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Learn more {{ n }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="swiper-pagination"></div>&nbsp; &nbsp; <div class="swiper-button-prev"></div>&nbsp; &nbsp; <div class="swiper-button-next"></div>&nbsp; &nbsp; <div class="swiper-scrollbar"></div>&nbsp; </div></template><script>import Swiper, { Navigation, Pagination } from 'swiper';Swiper.use([Navigation, Pagination]);import 'swiper/swiper-bundle.css';export default {&nbsp; name: 'Swiper',&nbsp; props: {&nbsp; &nbsp; options: {&nbsp; &nbsp; &nbsp; type: Object,&nbsp; &nbsp; &nbsp; default: () => {&nbsp; &nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; slidesPerView: 1&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; },&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; swiper: null,&nbsp; &nbsp; }&nbsp; },&nbsp; created() {&nbsp; &nbsp; console.log('Swiper', Swiper);&nbsp; },&nbsp; mounted() {&nbsp; &nbsp; let vm = this;&nbsp; &nbsp; if (this.options && vm.$refs.swiper !== 'undefined') {&nbsp; &nbsp; // or if (this.$el && this.options) {&nbsp; &nbsp; &nbsp; vm.$refs.swiper.classList.remove('carousel-hero--is-hidden');&nbsp; &nbsp; &nbsp; this.swiper = new Swiper(vm.$refs.swiper, {&nbsp; &nbsp; &nbsp; // or this.swiper = new Swiper(this.$el, {&nbsp; &nbsp; &nbsp; &nbsp; slidesPerView: this.options.slidesPerView,&nbsp; &nbsp; &nbsp; &nbsp; navigation: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; nextEl: '.swiper-button-next',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; prevEl: '.swiper-button-prev',&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; on: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; init: function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log('swiper initialized');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; resize: function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log('resize');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; },&nbsp; methods: {&nbsp; }};</script><style scoped>&nbsp; .carousel-hero {&nbsp; &nbsp; &--is-hidden {&nbsp; &nbsp; &nbsp; display: none;&nbsp; &nbsp; }&nbsp; &nbsp; &-container {&nbsp; &nbsp; &nbsp; @include make-container();&nbsp; &nbsp; &nbsp; @include default-max-widths();&nbsp; &nbsp; &nbsp; max-height: 200px !important;&nbsp; &nbsp; &nbsp; overflow: hidden;&nbsp; &nbsp; }&nbsp; &nbsp; &-row {&nbsp; &nbsp; &nbsp; @include make-row();&nbsp; &nbsp; &nbsp; padding: rem(25px 0);&nbsp; &nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; }&nbsp; &nbsp; &-column {&nbsp; &nbsp; &nbsp; @include make-col-ready();&nbsp; &nbsp; }&nbsp; &nbsp; border: 10px solid red;&nbsp; &nbsp; &-wrapper {&nbsp; &nbsp; }&nbsp; &nbsp; &__slide {&nbsp; &nbsp; }&nbsp; &nbsp; .slide {&nbsp; &nbsp; &nbsp; &__image {&nbsp; &nbsp; &nbsp; &nbsp; @include img-fluid();&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &__content {&nbsp; &nbsp; &nbsp; &nbsp; border: 1px solid blue;&nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; top: 50%;&nbsp; &nbsp; &nbsp; &nbsp; left: 50%;&nbsp; &nbsp; &nbsp; &nbsp; transform: translate(-50%, -50%);&nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; height: 100%;&nbsp; &nbsp; &nbsp; &nbsp; @include media-breakpoint-up(lg) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; max-width: 85%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; max-height: 85%;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &__heading {&nbsp; &nbsp; &nbsp; &nbsp; font-size: rem(48px);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &__description {&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &__button {&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }</style>