Vue2中使用vue-awesome-swiper创建轮播图幻灯片

 一. 使用 vue-awesome-swiper 3.1.3 版本

https://github.com/surmon-china/vue-awesome-swiper/tree/v3.1.3https://github.com/surmon-china/vue-awesome-swiper/tree/v3.1.3

1. 安装 swiper 包和 vue-awesome-swiper 包

注意：这两个包缺一不可，且安装时都要指定版本号！！！不然会踩很多大坑！！!

这里用的swiper@4.5.1和vue-awesome-swiper@3.1.3 版本是相照应的，不可以使用其他版本！

npm install swiper@4 vue-awesome-swiper@3 --save  

2. 引入

引入方式可以参考官方文档，两种方式选一种即可：vue-awesome-swiper at v3.1.3

（1）第一种方式：在main.js入口文件中全局引入

// /src/main.js// swiper全局引入
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

 （2）第二种方式：在需要使用轮播图的文件中按需引入

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'export default {components: {swiper,swiperSlide}
}
</script>

3. 使用轮播图

<template><div><swiper ref="mySwiper" :options="swiperOption"><!-- 三张轮播图 --><swiper-slide><img src="../assets/images/pic1.jpeg" alt=""></swiper-slide><swiper-slide><img src="../assets/images/pic2.jpeg" alt=""></swiper-slide><swiper-slide><img src="../assets/images/pic3.jpeg" alt=""></swiper-slide><!-- 分页器。如果放置在swiper外面，需要自定义样式。 --><div class="swiper-pagination" slot="pagination"></div></swiper></div>
</template><script>
// swiper已经全局引入过了，因此这里没有再引入export default {name: 'HomeView',data() {return {//swiper轮播swiperOption: {pagination: {el: '.swiper-pagination'}},}},}
</script>

踩坑：

vue-awesome-swiper @3.1.3使用，记录一些bug及解决方法_AIpoem的博客-CSDN博客安装、引入、需求：切换slide时要更换app组件的背景、问题：第一次进入时可以正常切换slide，切换路由之后，再切换回来就不能正常切换slide了、问题：默认显示的是最后一个swiper-slidehttps://blog.csdn.net/gegegegege12/article/details/121387965

vue-awesome-swiper 轮播图 自定义分页器 - 闰土的土 - 博客园首先最重要的是安装对应版本的swiper和vue-awesome-swiper，不然会有坑。 我安装的是"swiper": "^4.5.1","vuehttps://www.cnblogs.com/orzzt/p/15775075.html

4. 详细使用方法

教程见第09节--第11节：

技术胖-Vue2.x+Koa2实战移动电商(共61集)Vue2.x+Koa2实战移动电商(共61集)https://www.jspang.com/article/61#toc10

<template><div><swiper class="swiper" :options="swiperOption"><swiper-slideclass="swiper-slide"v-for="(item, index) in slide":key="index">Slide {{ item }}</swiper-slide><!-- 分页器 --><div class="swiper-pagination" slot="pagination"></div></swiper></div>
</template><script>
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {data() {return {slide: [1, 2, 3, 4, 5, 6],swiperOption: {// 竖向direction: "vertical",// 循环滚动loop:true,//分页器pagination: {el: ".swiper-pagination",clickable:true},// 实现区域滚动效果// // 一屏中显示的swiper-slide数量// slidesPerView: "auto",// // 自由模式，一次不止滑动一屏，实现滚动效果// freeMode: true,// // 鼠标滚轮可以实现滚动// mousewheel: true,},};},components: { swiper, swiperSlide },
};
</script><style scoped>
.swiper-slide {height: 4rem;text-align: center;line-height: 4rem;
}
.swiper {height: 7rem;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;
}
.text {font-size: 18px !important;text-align: left;padding: 30px;height: auto;-webkit-box-sizing: border-box;box-sizing: border-box;
}
</style>

二. 使用 vue-awesome-swiper 4.1.1 版本

GitHub - surmon-china/vue-awesome-swiper at v4.1.1https://github.com/surmon-china/vue-awesome-swiper/tree/v4.1.1

1. 安装 swiper 包和 vue-awesome-swiper 包

注意：这两个包缺一不可，且安装时都要指定版本号！！！不然会踩很多大坑！！!

这里用的swiper@5.4.5和vue-awesome-swiper@4.1.1版本是相照应的，不可以使用其他版本！

npm install swiper@5.4.5 vue-awesome-swiper@4.1.1 --save

2. 引入

引入方式可以参考官方文档，两种方式选一种即可：vue-awesome-swiper at v4.1.1

（1）第一种方式：在main.js入口文件中全局引入

// /src/main.js// swiper全局引入
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

（2）第二种方式：在需要使用轮播图的文件中按需引入

<script>
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'export default {components: {Swiper,SwiperSlide},directives: {swiper: directive}
}
</script>

3. 使用轮播图

<template><swiper ref="mySwiper" :options="swiperOptions"><!-- 幻灯片 --><swiper-slide>Slide 1</swiper-slide><swiper-slide>Slide 2</swiper-slide><swiper-slide>Slide 3</swiper-slide><swiper-slide>Slide 4</swiper-slide><swiper-slide>Slide 5</swiper-slide><!-- 分页器 --><div class="swiper-pagination" slot="pagination"></div></swiper>
</template><script>export default {name: 'carrousel',data() {return {// swiper 轮播swiperOptions: {pagination: {el: '.swiper-pagination'},// Some Swiper option/callback...}}},computed: {swiper() {return this.$refs.mySwiper.$swiper}},mounted() {console.log('Current Swiper instance object', this.swiper)this.swiper.slideTo(3, 1000, false)}}
</script>

踩坑：

关于vue-awesome-swiper pagination组件失效后想到的旁门左道解决办法 - 简书项目做整屏滚动效果，使用 "vue-awesome-swiper": "^4.1.1"。发现pagination这分页器罢工，完全不显示，查阅好多资料，比较靠谱的解决办法就是...https://www.jianshu.com/p/be2bc71dcde2