Of Stack

Solve the problem of using swiper plug in error in vue

  • 2021-11-13 00:43:26
  • OfStack

Because I used this plug-in when I was writing an demo, I had some problems, so I simply checked the usage of this plug-in and some common mistakes

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

Missing Source Map file when using min version

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

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

2. It can't be automatically carousel, and paging dots are not displayed

Solution:

install plus version number.

Due to the version problem 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 installvue-awesome-swiper@3.1.3 --save

After installing version 3.1. 3, restart the view and solve it

3. Error in render appears: "TypeError: Cannot set property 'params' of undefined"-related to the version number, with uppercase initials in version 4.0 and lowercase initials in version 3.0.

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

如果使用的是3.x版本vue-awesome-swiper@3.x The import code is as follows: 


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

如果使用的是4.x版本vue-awesome-swiper@4.x The import code is as follows: 


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

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

The JS file may not be loaded or the location is wrong

The solution is as follows:

Download the package and load the JS and CSS files of Swiper in the page, or use the CDN service of Swiper to load the files and initialize Swiper after loading

Vue中使用Swiper的用法如下：

Type 1: Global introduction

In main. js 


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

Type 2: Local introduction

In the js file of the module used 


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, 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 inside 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. For details, please refer to official website: https://www.swiper.com.cn/api/index.html

Related articles: