之前在vue2项目中要用到轮播的功能，用swiper插件实现遇到了一些坑。
先上结果，运行安装命令：
npm i swiper@5.x vue-awesome-swiper -s
在main.js文件中加上
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper)
轮播代码（样式需自己调整）：
// template
<swiper
:options="swiperOption"
@swiper="onSwiper"
@slideChange="onSlideChange"
>
<swiper-slide>123</swiper-slide>
<swiper-slide>456</swiper-slide>
<swiper-slide>789</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>
// js
<script>
export default {
data () {
return {
swiperOption: {
slidesPerView: 2,
// 设置分页器
pagination: {
el: '.swiper-pagination',
// 设置点击可切换
clickable: true
},
// 设置前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
// 设置自动轮播
autoplay: {
delay: 5000 // 5秒切换一次
},
// 设置轮播可循环
loop: true
}
}
},
methods: {
onSwiper () {
},
onSlideChange () {
}
}
}
</script>
遇到的一些坑：
默认安装swiper的话，会安装到最新的版本6，最新版本好像是用在vue3上的，vue2用不了
安装后要引入swiper的css，最新版本的是
import 'swiper/swiper-bundle.css'
vue2的swiper5的引入是
import 'swiper/css/swiper.css'
