diff --git a/urara/2022-10-03-vue-carousel-3d/+page.md b/urara/2022-10-03-vue-carousel-3d/+page.md new file mode 100644 index 00000000..8361e563 --- /dev/null +++ b/urara/2022-10-03-vue-carousel-3d/+page.md @@ -0,0 +1,57 @@ +--- +title: nuxt2 安装3d轮播图插件vue-3d-carousel +created: 2022-10-03 +summary: Using Vue-3d-carousel in nuxt2 +tags: + - Nuxt2 +--- + +[Vue-3d-carousel](https://github.com/Wlada/vue-carousel-3d)是一个 vue2 的 3d 轮播图组件包,比起 swipe 里面的轮播图其 3d 方面的自定义选项更多,缺点是单位只能用 px,自适应不太方便,而且点击左右两边的卡片时会连跳两级,动画效果不太流畅。 + +- 文档:[Vue Carousel 3D - 3D Carousel for Vue.js](https://wlada.github.io/vue-carousel-3d/) +- Nuxt 版本:2.15.8 + +## 1-安装 + +```bash +npm install -S vue-carousel-3d +``` + +或者 + +```bash +yarn add vue-carousel-3d +``` + +## 2-配置 nuxt 插件 + +在 `/plugin`文件夹里面加入`vue-carousel-3d.js` ,写入 + +```js +import Vue from 'vue' +import Carousel3d from 'vue-carousel-3d' + +Vue.use(Carousel3d) +``` + +然后在 nuxt.config.js 里面配置插件,这个插件需要关闭 ssr + +```js +export.module{ + plugin:[ + {src:'vue-carousel-3d',ssr:false}], +} +``` + +## 3-使用举例 + +需要包裹在``里面 + +```html + + + Slide 1 Content + Slide 2 Content + + +```