标签:ati nbsp 配置 height dex 轮播 item target efault
1.介绍:是一款vue的3D轮播图插件,插件文档地址 https://wlada.github.io/vue-carousel-3d/
1.1.安装以及使用
// 安装 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 } }
1.2.html部分
<template> <!--具体参数的配置请仔细查看文档--> <carousel-3d :autoplay="true" :autoplayTimeout="3000" :perspective="35" :display="5" :animationSpeed="1000" :width="300" :height="270" controlsVisible :controlsHeight="60" > <slide v-for="(item, i) in slides" :index="i" :key="i"> <!--通过插槽作用域可以拿到点击的图片的索引--> <template slot-scope="obj"> <img @click="imgClick(obj)" :src="item.src" alt=""> </template> </slide> </carousel-3d> </template>
1.3.js逻辑部分
<script> export default { data () { return { slides: [ { src: ‘https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg‘ } ] } } } </script>
标签:ati nbsp 配置 height dex 轮播 item target efault
原文地址:https://www.cnblogs.com/zxuedong/p/12827548.html