vue中使用swiper 問題

1 不能自動輪播，分頁點點不顯示

  解決辦法：

install 加版本號。

在vue中使用swiper插件的方式，請前往這里查看https://blog.csdn.net/friend_ship/article/details/104919781

由於vue-awesome-swiper插件包的版本問題，會出現左右箭頭點擊失效的情況

解決方式如下：

npm uninstall vue-awesome-swiper --save

npm install vue-awesome-swiper@3.1.3 --save

安裝完3.1.3的版本后，重新啟動查看就解決了

2 報錯  Error in render: "TypeError: Cannot set property 'params' of undefined"  ---跟版本號有關系，4.0 版本首字母大寫，3.0版本，首字母小寫。

答案鏈接：https://github.com/surmon-china/vue-awesome-swiper/issues/499

 If you use vue-awesome-swiper@3.x , the correct code is:

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

else if you use vue-awesome-swiper@4.x, the correct code is:

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

 

vue 中swiper的用法 如下鏈接：

https://blog.csdn.net/friend_ship/article/details/104919781

第一種：全局引入

在main.js中

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

 

第二種：局部引入

在所用模塊的js文件中

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

 

在.vue文件中,左右箭頭放在輪播圖的外面，代碼如下：

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

 

在.vue文件中,左右箭頭放在輪播圖的里面，代碼如下：

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

 

 

上面swiperOption的配置信息如下，具體請參考官網： 

 例子：點擊該文字