利用carousel-3d插件。
安裝

npm install -S vue-carousel-3d

全局引入

import Vue from 'vue' import Carousel3d from 'vue-carousel-3d' Vue.use(Carousel3d）

局部引入

import { Carousel3d, Slide } from "vue-carousel-3d";export default {components: {Carousel3d,Slide,}, }

html部分

<template><carousel-3d :width="200" :height="300" :space='280' :perspective='0' :animationSpeed='2000'><slide v-for="(slide, i) in slides" :index="i" :key="i"><img src=""/></slide></carousel-3d> </template>

js部分

data() {return {slides: [{src: '../assets/img/img_hongbao@2x.png',},{src: '../assets/img/img_hongbao@2x.png',},{src: '../assets/img/img_hongbao@2x.png',},{src: '../assets/img/img_hongbao@2x.png',},{src: '../assets/img/img_hongbao@2x.png',},{src: '../assets/img/img_hongbao@2x.png',},]}},

npm地址
https://www.npmjs.com/package/vue-carousel-3d
具體參數和回調函數下載 github.com/wlada/vue-carousel-3d 地址
包下載下來后在app.vue里面可以看到官方的例子及回調函數
在docs/public/api/index.html里可以看到各個參數文檔
npm install --save安裝依賴后 npm run serve可以運行看例子以及調試

總結

以上是生活随笔為你收集整理的vue 3D旋转木马轮播图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。