1.下载安装 cnpm install swiper vue-awesome-swiper --save
2.main.js:
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import "swiper/swiper-bundle.min.css";
Vue.use(VueAwesomeSwiper)
//配置分页器
import {Swiper as SwiperClass,Pagination} from 'swiper';
SwiperClass.use([Pagination]);
3.vue页面:
<template>
<div v-swiper:mySwiper="swiperOption">
<div class="swiper-wrapper">
<div class="swiper-slide">slide 1</div>
<div class="swiper-slide">slide 2</div>
<div class="swiper-slide">slide 3</div>
</div>
<div class="swiper-pagination" slot="pagination"></div>
</div>
</template>
<script>
export default {
data() {
return {
swiperOption: {
direction: "vertical", //设置竖向轮播
pagination: {
el: ".swiper-pagination",
clickable:true,
},
on: {
slideChangeTransitionEnd: function () {
// this.activeIndex 是索引index,这个用this才可以获取到
console.log(this.activeIndex);
},
},
},
};
},
mounted() {
this.mySwiper.slideTo(0, 1000, false);
},
};
</script>
<style scoped>
.swiper-container {
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.swiper-slide {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
font-size: 2rem;
}
</style>
效果图:
注:我安装的当前版本是"swiper": “^7.3.3”,“vue-awesome-swiper”: “^4.1.1”,