vue 3d轮播组件 vue-carousel-3d
开发可视化项目时,需要3d轮播图,找来找去发现这个组件,引用简单,最后实现效果还不错。发现关于这个组件,能搜到的教程不多,就分享一下我的经验。
插件github地址:https://wlada.github.io/vue-carousel-3d/
1,安装组件
npm install -S vue-carousel-3d
2, 引入组件
在所需要显示此组件的页面vue文件中引入
import { Carousel3d, Slide } from 'vue-carousel-3d'
export default {
...
components: {
Carousel3d,
Slide
}
...
}
3,页面结构中写入组件
<carousel-3d :autoplay="true">
<slide v-for="(slide, i) in slides" :key="i" :index="i">
<template slot-scope="{ index, isCurrent, leftIndex, rightIndex}">
<img
:data-index="index"
:class="{ current: isCurrent, onLeft: (leftIndex >= 0), onRight: (rightIndex >=0)}"
src="slide.src"
>
</template>
</slide>
</carousel-3d>
定义数组来储存需要显示都轮播图
slides: [
{
src: 'xxxx',
},
{
src: 'xxxx',
},
{
src: 'xxxx',
},
]
至此3d轮播组件会显示再你的页面中。
vue 3d轮播组件 vue-carousel-3d的更多相关文章
- Vue编写轮播组件引入better-scroll插件无法正常循环轮播
临近过年还是发个博客表示一下自己的存在感,这段时间公司突然说想搞小程序,想到这无比巨大的坑就只能掩面而泣,于是乎这段时间在学习小程序开发.关于标题所说的是有老铁问的,我也跟着网上的代码码了一遍然后发现 ...
- vue中引入awesomeswiper的方法以及编写轮播组件
1.先安装less-loader npm install less less-loader --save 2.再安装css-loader npm install css-loader --save 3 ...
- vue-awesome-swipe 基于vue使用的轮播组件 使用(改)
npm install vue-awesome-swiper --save //基于vue使用的轮播组件 <template> <swiper :options="swi ...
- 小程序实现非swiper组件的自定义伪3D轮播图
效果如下: 我用了很笨的方法实现的,大致就是: 1.当前点击的div(view)如果前后都有内容,那么,当前div(view)就设置到中间,前一个就设置到左边,前一个的前面所有全部设置到最左边,后面一 ...
- 微信小程序 - 3d轮播图组件(基础)
<!-- 目前仅支持data数据源来自banner,请看测试案例 ################ 以上三种形式轮播: 1. basic 2. 3d 3. book basic即普通轮播 3d即 ...
- 3d轮播图——类似酷狗的轮播
说到轮播图,其实只要是跟web开发相关的无论是前端后端应该都不陌生,各种各样的轮播图,从以前的单纯的平面山水画遮盖滑动或滚动,到Jquery的animate甚至是h5+css3,各种炫酷的轮播图更是层 ...
- 3D轮播切换特效 源码
这个3D轮播切换特效是我2017年2月份写的 当初我 刚接触HTML不久,现在把源码分享给大家 源码的注释超级清楚 . <!-- 声明文档类型:html 作用:符合w3c统一标准规范 每个浏览器 ...
- 微信小程序之 3d轮播(swiper来实现)
以前写过一篇3d轮播,就是这篇,使用的方法比较笨拙,而且代码不简洁.这次发现swiper也能实现同样的效果.故记录一下. 先看看效果: wxml: <swiper previous-margin ...
- CSS3之3D轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- k8s全方位监控中-常用rules配置
[root@VM_0_48_centos prometheus]# cat alertmanager-configmap.yaml apiVersion: v1 kind: ConfigMap met ...
- Java 中线程池的 7 种创建方式!
在 Java 语言中,并发编程都是通过创建线程池来实现的,而线程池的创建方式也有很多种,每种线程池的创建方式都对应了不同的使用场景,总体来说线程池的创建可以分为以下两类: 通过 ThreadPoolE ...
- 矩池云上安装yolov4 darknet教程
这里我是用PyTorch 1.8.1来安装的 拉取仓库 官方仓库 git clone https://github.com/AlexeyAB/darknet 镜像仓库 git clone https: ...
- Docker - 安装&测试
一.什么是Docker Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从 Apache2.0 协议开源. Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中 ...
- 9.resultMap元素
resultMap 是 MyBatis 中最复杂的元素,主要用于解决实体类属性名与数据库表中字段名不一致的情况,可以将查询结果映射成实体对象.下面我们先从最简单的功能开始介绍. 现有的 MyBatis ...
- tp5三级联动的实现
tp5三级联动的实现 首先注意这里 如果说一级菜单不选中的话 后边的二级菜单是没有数据的 这里就要用到三级联动 第一步:先把一级菜单的数据查询展示出来 所以 pid 默认等于 0 代码实例: publ ...
- Navicat连接不上MySQL 8.0
Navicat连接不上MySQL 8.0 更改加密方式 1.先通过命令行进入mysql的root账户: C:\Windows\system32> mysql -uroot -p 2.更改加密方式 ...
- 如何取消以太坊智能合约授权,防止被黑客盗取Token?
在小狐狸钱包(MetaMask)日常使用中,有一个细节可能很少人注意到,就是无论你登入什么网站,或者需要跟任何项目签订智能合约都要授权的步骤,这其中就会给黑客留下很多空子,特别是将一个Token用智能 ...
- JavaScript闭包的概念及用法
1.闭包的概念: 闭包就是能够读取其他函数内部变量的函数. 例如: function f1(){ var n=999; function f2(){ alert(n); } return f2; } ...
- Python 基础知识自检,离深入掌握 Python 还有多远
1. 模块化编程思想 模块化编程是 Python 的基本思想.初学 Python,都应该使用过小海龟.随机.数学模块.使用模块之前,需要导入模块,然后根据自己的问题需要使用这些模块. Python 提 ...