nuxt2安装3d轮播图插件vue-3d-carousel

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

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>