vue 3D旋转木马轮播图

利用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旋转木马轮播图相关推荐

css3旋转木马轮播图,3D旋转木马轮播图(原创)
body { perspective:1000px; /* 透视要加到父级元素 */ } section { position:relative; width:300px; height:200px; ...
js实现旋转木马轮播图
整个页面的文件结构如下图所示: html部分代码: <!DOCTYPE html> <html lang="en"> <head><met ...
Vue 过渡实现轮播图
Vue 过渡实现轮播图 Vue 过渡 Vue 的过渡系统是内置的,在元素从 DOM 中插入或移除时自动应用过渡效果. 过渡的实现要在目标元素上使用 transition 属性,具体实现参考Vue2 过 ...
CSS3 3D切割轮播图
一.效果图二.源码 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
利用swiper在vue中做轮播图，并改变轮播图的原有箭头、图片等内容
目标:利用swiper在vue中做轮播图,并改变轮播图的原有箭头.图片等内容. 实现效果:1.点击左右箭头可切换图片. 2.点击后图片出现最左侧样式效果,只有被点击的图片有此效果,不被点击恢复默认效果 ...
html3d轮播图片效果,炫酷3D透视轮播图特效
这是一款炫酷js和CSS3 3D透视轮播图特效.该3D轮播图通过CSS3制作图片的3D透视效果,并使用js来使轮播图于用户进行交互,效果非常炫酷. 使用方法在页面中引入style.css和index ...
Android 旋转木马轮播,js实现旋转木马轮播图效果
本文实例为大家分享了js实现旋转木马轮播图的具体代码,供大家参考,具体内容如下整个页面的文件结构如下图所示: html部分代码: 旋转木马轮播图在html部分引入的myStyle.css文件部分代 ...
vue移动端轮播图适配宽高
vue移动端轮播图适配宽高 /** 初始化轮播图的高度 */initSwipeHeight(){console.log(window.screen.width)let picw = 1242; // ...
Swiper制作3d旋转木马轮播
Swiper制作3d旋转木马轮播现在html5页面效果用户体验要求原来越高了,慢慢出现了好多小伙伴需要使用到类似3d效果的旋转木马轮播,现本人通过Swiper插件制作一个该效果,下面会附上效果图和源 ...

vue 3D旋转木马轮播图

vue 3D旋转木马轮播图相关推荐

最新文章

热门文章