Solve the problem of using the swiper plugin in vue

Since I used the plug-in when writing a demo myself, there were some problems, so I simply checked the usage of the plug-in and some common errors

1. Get .../maps/ 500 appears (Internal Server Error)

Source Map file is missing when using min version

1. Disable Source Map prompts and delete the last line of the file //# sourceMappingURL=

2. If you need to use Source Map,Complete packageThis file is included, please place it in the corresponding location. aboutSource Map

2. Cannot automatically carousel appear, and the page dots will not be displayed

Solution:

install add version number.

Due to the version of the vue-awesome-swiper plug-in 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 the 3.1.3 version, restarting the viewing process will be solved

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

Answer link：/surmon-china/vue-awesome-swiper/issues/499

If using the version vue-awesome-swiper@, the import code is as follows:

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

If using the version vue-awesome-swiper@, the import code is as follows:

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

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

Probably no JS file loading or location error

The solution is as follows:

Download the file package and load Swiper's JS and CSS files in the page, or useSwiper's CDN serviceLoad the file, and then initialize Swiper after loading

The usage of Swiper in Vue is as follows:

The first type: global introduction

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

The second type: partial introduction

In the js file of the module used

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

In the .vue file, the left and right arrows are placed outside the carousel diagram, and 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 in the carousel diagram, and 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. Please refer to the official website for details:/api/

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