本文为大家分享了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">
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。