Urara-Blog/urara/2022-10-03-vue-carousel-3d/+page.md

title	created	summary	tags
nuxt2安装3d轮播图插件vue-3d-carousel	2022-10-03	Using Vue-3d-carousel in nuxt2	Nuxt

Vue-3d-carousel是一个 vue2 的 3d 轮播图组件包，比起 swiper 里面的轮播图其 3d 方面的自定义选项更多，缺点是单位只能用 px，自适应不太方便，而且点击左右两边的卡片时会连跳两级，动画效果不太流畅。

• 文档：Vue Carousel 3D - 3D Carousel for Vue.js
• Nuxt 版本：2.15.8

1-安装

npm install -S vue-carousel-3d

或者

yarn add vue-carousel-3d

2-配置 nuxt 插件

在 /plugin文件夹里面加入vue-carousel-3d.js ,写入

import Vue from 'vue'
import Carousel3d from 'vue-carousel-3d'

Vue.use(Carousel3d)

然后在 nuxt.config.js 里面配置插件，这个插件需要关闭 ssr

export.module{
	plugin:[
	{src:'vue-carousel-3d',ssr:false}]，
}

3-使用举例

需要包裹在<client-only>里面

<client-only>
  <carousel-3d>
    <slide :index="0">Slide 1 Content</slide>
    <slide :index="1">Slide 2 Content</slide>
  </carousel-3d>
</client-only>