new post

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-使用举例
+
+需要包裹在`<client-only>`里面
+
+```html
+<client-only>
+  <carousel-3d>
+    <slide :index="0">Slide 1 Content</slide>
+    <slide :index="1">Slide 2 Content</slide>
+  </carousel-3d>
+</client-only>
+```