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

vue 3D轮播展示 --vue-carousel-3d_第1张图片

 根据 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

 
      
        
      
    

这里值得注意的是 

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

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

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

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

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



你可能感兴趣的:(Vue相关,javascript)