vue 3D轮播展示 --vue-carousel-3d

根据 vue-carousel-3d 官方网站上面的实例进行使用并修改

官网地址：https://wlada.github.io/vue-carousel-3d/guide/

使用流程：

Installation

npm install -S vue-carousel-3d

Usage (Global)

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

Usage (Local)

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

在这里我使用插槽，插入自己想要的布局样式

Scoped Slots

 <carousel-3d v-if="showList" :space="350" :display="9"><slide v-for="(image, i) in crbList" :key="i" :index="i"><template slot-scope="{ index}"><divclass="poster-item":data-index="index":style="{background:`${image.yanse}`}"><router-linkclass="image_item_div_link":to="{name:'crb_detail', params: {id:image.id}}"><img class="image_item" :src="data:image.image"><spanclass="span_div":style="{background:'rgba(0, 0, 0, 0.1)',border: `2px solid ${image.yanse}` }">{{ image.name }}</span></router-link></div></template></slide></carousel-3d>

这里值得注意的是

如果数据列表在页面渲染之后才有数据

则需要让插件在数据得到之后渲染我这边使用了v-if

部分样式调整需要使用！important 但整体的宽度需要设置该插件暴露出来的属性

比如 :space="350" :display="9"

认认真看完当前插件里面的api 属性就能实现你项目里的基本功能


<style lang="scss" scoped>
/deep/ .carousel-3d-container {padding-top: 200px;height: 650px !important;// background-color: #fff;
}
/deep/ .carousel-3d-slider {width: 300px !important;height: 378px !important;background: unset;
}
/deep/ .carousel-3d-slide {width: 299px !important;height: 378px !important;background: unset;border: none;
}
.poster-item {// background: #fff;height: 375px;width: 300px;border-radius: 10px;padding: 45px 23px 20px 23px;transition: all 0.5s;cursor: default;-moz-transition: all 0.5s;cursor: default;-webkit-transition: all 0.5s;cursor: default;-o-transition: all 0.5s;cursor: default;
}</style>

vue 3D轮播展示 --vue-carousel-3d相关推荐

【uniapp】3d轮播图/堆叠轮播图/层叠轮播图
前言 uniapp 3d轮播图 uniapp实现3D轮播图从uniapp插件市场下载插件:https://ext.dcloud.net.cn/plugin?id=243#detail 操作步骤导入 ...
vue2/3项目中使用Vue Carousel 3D实现 Carousel 3D 轮播
项目需求大概是这个样子,这种并不能通过围成一周再旋转父级实现,因此图方便选择了组件轮播 vue2,可以直接使用 Playground - Vue Carousel 3D - 3D Carousel ...
3d饼图 vue_这是我见过最优雅的Vue图片轮播插件——Vue-Awesome-Swiper
介绍在Web网页开发中,我们经常需要用到图片轮播,在以往传统的开发方式中有很多基于jquery的插件可供使用,但是随着目前各类前端框架层出不穷的现状,在某些方面特别是针对特定的场景,还是有不少地方不 ...
Vue项目中使用swiper插件开发3d轮播图
在开发过程中有3D轮播图的需求,使用vue-awesome-swiper完成先贴个效果图安装npm install swiper@5.4.5 vue-awesome-swiper -S 全局引入并 ...
微信小程序vue轮播图_微信小程序使用swiper组件实现类3D轮播图
Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单. ...
Ant Design Vue多张图为一组轮播展示
目的实现多张图为一组轮播展示效果 H5代码块 <div class="rightDisplay"><a-carousel arrows autoplay> ...
移动端h5 层叠轮播图，uniapp微信小程序层叠轮播图，3d轮播图
如果你的项目使用的是jquery的话推荐使用swiper 进行做 https://www.swiper.com.cn/usage/index.html 如果用的是vue3开发的纯h5项目的话,推荐 ...
css3轮播不用jpuery_js和CSS3 3D轮播图
这是一款js和CSS3 3D轮播图.这组3D轮播图中,共演示了6种轮播图效果.这些3D轮播图都是通过简单的JS代码配合CSS3来完成的. 使用方法 HTML结构以8张图片的3D轮播图为例,它的基本H ...
微信小程序实现3D轮播图
在写微信小程序时,有写到实现3D轮播图的效果,可以直接使用微信小程序中自带的组件swiper来实现效果图如下: 1.swiper的相关属性 indicator-dots 是否显示小圆点,也可以自己重 ...

vue 3D轮播展示 --vue-carousel-3d

Installation

Usage (Global)

Usage (Local)

在这里我使用插槽，插入自己想要的布局样式

Scoped Slots

vue 3D轮播展示 --vue-carousel-3d相关推荐

最新文章

热门文章

vue 3D轮播展示 --vue-carousel-3d

Installation

Usage (Global)

Usage (Local)

在这里 我使用插槽，插入自己想要的布局样式

Scoped Slots

vue 3D轮播展示 --vue-carousel-3d相关推荐

最新文章

热门文章

在这里我使用插槽，插入自己想要的布局样式