本文为大家分享了VUE 3D轮播图封装的具体代码，供大家参考，具体内容如下
一、体验地址
二、实现功能点
（1）、无缝轮播 （2）、进入变大、离开缩小（类3d切换效果）
三、js代码
<script type="text/ecmascript-6">
import {swiper,swiperSlide} from 'vue-awesome-swiper'
require('swiper/dist/css/swiper.css');//注意这里
import Pageination from "./pageination"
import { mapActions,mapMutations,mapGetters,mapState} from "vuex"
import {getPriceSymbolValue} from '../../util/tool/index'
export default {
//props: ['bannerList'],data() {
let _self=this;
return {
pageinationIndex:0,data: {
"bannerList":[]
},swiperOption: {
loop: true,// 循环
speed:500,//切换速度
mousewheelControl: false,// 禁止鼠标滚轮切换
lazy: {
loadPrevNext: true,},pagination: {
el: '.swiper-pagination',autoplay: {
delay:2000,stopOnLastSlide: false,// 切换到最后一个时不停止
disableOnInteraction: false,//用户操作swiper之后 不停止autoplay
},watchSlidesProgress:true,centeredSlides: true,//设定为true时，活动块会居中，而不是默认状态下的居左。
spaceBetween:10,slidesPerView: 1.7,loopedSlides :2,observer: true,observeParents: true
}
}
},methods: {
},mounted() {
// 这边就可以使用swiper这个对象去使用swiper官网中的那些方法
// this.$nextTick(function() {
// this.swiper.slideTo(3,10,false);
// });
},computed: {
swiper() {
return this.$refs.mySwiper.swiper
}
},components: {
swiper,swiperSlide,Pageination
}
}
<style lang="scss" type="text/scss">
