vue-awesome-swiper

Posted 2023-05-17

参考技术A

参考资料：
1. https://www.jianshu.com/p/03f9fa94c474
2. https://www.cnblogs.com/yuanjili666/p/11510579.html

因为elementui没有自带swiper，所以我们使用vue-awesome-swiper
（iview自带一个 https://iview.github.io/components/carousel ）
介绍一下vue-awesome-swiper最靠谱的使用方法。

目前网上对于vue-awesome-swiper的使用方法各种坑，要么版本对不上，要么swiper.css引用地址不对，要么swiper-pagination不显示，要么自动轮播失效，反正各种坑让人火大。下面介绍一下自己亲测可用的正确使用方法。

首先版本，请使用3.1.3，别想着用什么4以上的或别的版本，目前就这个版本最稳定，不相信可以自己去测试，掉坑里可别怪没提醒！

页面引入即可，没必要全局引入，因为很少所以页面都要使用轮播的。全局引入只会增加额外的加载缓存和加载速度。全部贴出来自己衡量吧。

页面引入
请注意此处引入的swiper, swiperSlide的s是小写，搞错会报错。

全局引入
main.js

查看github的vue-awesome-swiper的官方示例：
https://github.surmon.me/vue-awesome-swiper/

以上。

最新更新了 “如何在nuxt项目里使用vue-awesome-swiper” 的新文章，
有兴趣的诸位可点击查看： Nuxt使用vue-awesome-swiper的正确姿势

vue-awesome-swiper实现轮播图

1.首先通过npm安装vue-awesome-swiper，我在项目中用的是2.6.7版本

    npm install [email protected] –save

2. 在main.js中引入

import VueAwesomeSwiper from ‘vue-awesome-swiper‘

import ‘swiper/dist/css/swiper.css‘

Vue.use(VueAwesomeSwiper)

3.实现轮播图

1. <template>
2.  <div class="wrapper">
3.  <swiper :options="swiperOption" v-if="showSwiper" ref="mySwiper" >
4.     <!-- slides -->
5.     <swiper-slide v-for="item of list" :key="item.id">
6.        <img class="swiper-img" :src="item.imgUrl"/>
7.     </swiper-slide>
8.     <div class="swiper-pagination" slot="pagination"></div>
9.   </swiper>
10.   </div>
11. </template>
12.  
13. <script>
14.     export default {
15.         name:"HomeSwiper",
16.         props:{
17.           list:Array
18.         },
19.         data (){
20.            return{
21.             swiperOption:{
22.                pagination:".swiper-pagination",
23.                autoplay: 2000,
24.                loop:true,
25.                paginationClickable: true,
26.                observer:true,
27.                observeParents:true
28.             }
29.  
30.           }
31.         } ,
32.          computed: {
33.           showSwiper () {
34.           return this.list.length
35.         }
36.       }
37.     }
38.  
39. </script>
40.  
41. <style lang="stylus" scoped>
42.   .wrapper >>> .swiper-pagination-bullet-active
43.     background:#fff
44.   .wrapper
45.     overflow:hidden
46.     width:100%
47.     height 0
48.     padding-bottom:31.25%
49.     background:#eee
50.     .swiper-img
51.        width:100%
52. </style>