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

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

 <carousel-3d v-if="showList" :space="350" :display="9">
      <slide v-for="(image, i) in crbList" :key="i" :index="i">
        <template slot-scope="{ index}">
          <div
            class="poster-item"
            :data-index="index"
            :style="{background:`${image.yanse}`}"
          >
            <router-link
              class="image_item_div_link"
              :to="{name:'crb_detail', params: {id:image.id}}"
            >
              <img class="image_item" :src="image.image">
              <span
                class="span_div"
                :style="{background:'rgba(0, 0, 0, 0.1)',border: `2px solid ${image.yanse}` }"
              >{{ image.name }}</span>
            </router-link>
          </div>
        </template>
      </slide>
    </carousel-3d>

这里值得注意的是 

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

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

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

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

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

<style lang="scss" scoped>
/deep/ .carousel-3d-container {
  padding-top: 200px;
  height: 650px !important;
  // background-color: #fff;
}
/deep/ .carousel-3d-slider {
  width: 300px !important;
  height: 378px !important;
  background: unset;
}
/deep/ .carousel-3d-slide {
  width: 299px !important;
  height: 378px !important;
  background: unset;
  border: none;
}
.poster-item {
  // background: #fff;
  height: 375px;
  width: 300px;
  border-radius: 10px;
  padding: 45px 23px 20px 23px;
  transition: all 0.5s;
  cursor: default;
  -moz-transition: all 0.5s;
  cursor: default;
  -webkit-transition: all 0.5s;
  cursor: default;
  -o-transition: all 0.5s;
  cursor: default;
}

</style>