VUE 3D轮播图封装实现方法
在本文中，我们将详细介绍VUE 3D轮播图封装实现方法，提供了具有参考价值的内容，包括轮播图封装实现方法的实现功能点、JS代码等。
一、轮播图封装实现方法
轮播图封装实现方法是指使用VUE框架实现的3D轮播图效果，具有无缝轮播、进入变大、离开缩小（类3D切换效果）等功能点。
二、实现功能点
（1）、无缝轮播
无缝轮播是指轮播图可以无缝连接的效果，即当用户滑动到最后一页时，会自动跳转到第一张图片。
（2）、进入变大、离开缩小（类3D切换效果）
进入变大、离开缩小是指当用户滑动到下一页时，当前页面会逐渐变大，而下一页会逐渐缩小，产生类似3D切换的效果。
三、JS代码
<!--轮播图插件模板--><template></template><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
}
}
</script>
四、总结
本文详细介绍了VUE 3D轮播图封装实现方法，包括轮播图封装实现方法的实现功能点和JS代码，希望对大家的学习有所帮助，也希望大家多多支持我们。
