Solve the problem of using swiper plug-in in vue

Since I used this plugin when writing a demo and encountered some problems, I simply checked the usage of the plugin and some common errors.

1. Get .../maps/swiper.min.js.map 500 (Internal Server Error) appears

Source Map files missing when using min version

1. Disable Source Map prompt and delete the last line of swiper.min.js file //# sourceMappingURL=swiper.min.js.map

2. If you need to use Source Map, the complete package contains the file swiper.min.js.map, please put it in the corresponding location. About Source Map

2. The video cannot be rotated automatically and the page breaks are not displayed.

Solution:

install plus the version number.

Due to the version problem of the vue-awesome-swiper plugin package, the left and right arrow clicks may fail.

The solution is as follows:

npm uninstallvue-awesome-swiper --save

npm [email protected] --save

After installing version 3.1.3, restart and check to solve the problem

3. Error in render: "TypeError: Cannot set property 'params' of undefined" appears --- It is related to the version number. The first letter of version 4.0 is capitalized, and the first letter of version 3.0 is lowercase.

Answer link: https://github.com/surmon-china/vue-awesome-swiper/issues/499

如果使用的是3.x版本[email protected] , the import code is as follows:

import { swiper, swiperSlide } from 'vue-awesome-swiper

如果使用的是4.x版本[email protected] , the import code is as follows:

import { Swiper, SwiperSlide } from 'vue-awesome-swiper

4. Uncaught ReferenceError: Swiper is not defined at...

Maybe the JS file is not loaded or the location is wrong.

The solution is as follows:

Download the file package and load Swiper's JS and CSS files on the page, or use Swiper's CDN service to load the files, and then initialize Swiper after loading.

Vue中使用Swiper的用法如下：

The first one: global import

In main.js

import VueAwesomeSwiper from 'vue-awesome-swiper';
 import "swiper/dist/css/swiper.css";
 
 Vue.use(VueAwesomeSwiper)

The second method: local introduction

In the js file of the used module

import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
 
export default {
    
    components:
        swiper,
        swiperSlide
    }
}

In the .vue file, the left and right arrows are placed outside the carousel. The code is as follows:

<swiper class="swiper" :options="swiperOption" >
      <swiper-slide class="swiper-slide" v-for="item in 4" :key="item">
          <div class="swiper-content">{{item}}</div>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
</swiper>
 
 <div class="swiper-button-prev" slot="button-prev"></div>
 <div class="swiper-button-next" slot="button-next"></div>

In the .vue file, the left and right arrows are placed inside the carousel. The code is as follows:

<swiper class="swiper" :options="swiperOption" >
      <swiper-slide class="swiper-slide" v-for="item in 4" :key="item">
          <div class="swiper-content">{{item}}</div>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
</swiper>

The configuration information of swiperOption above is as follows. For details, please refer to the official website: https://www.swiper.com.cn/api/index.html

This is the end of this article about the error problem of using the swiper plug-in in vue. For more relevant content about using the swiper plug-in in vue, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!