最近在写前台页面，遇到一个层叠轮播图，效果图如下：

由于我这边的框架是vue+antd的组合，所以查看antd的官网后，发现并没有这种层叠轮播图的实现方法，找了很多，网上给的最多的建议就是使用vue-awesome-swiper插件来实现，但是我试了很久，一直报错。

1.使用vue-awesome-swiper插件报错

1.版本问题，导致npm一直失败

2.引入后的使用报错：因为对swiper不太熟，所以在配置options时发现不知道该怎么实现

2.网上有很多通过swiper.js实现的层叠轮播图，但是我这边拷贝代码后，效果一直没有实现。

最后我的实现方法是利用elementUi中的走马灯，外加一些样式的调整实现的。其实最终效果不算是太好。

跟我想要的效果有点相似，我只需要将两侧的图片往两边移动，然后添加上 左右切换按钮即可。

注意：图片轮播与上方的tab标签是一一对应的。

3.elementUi走马灯实现层叠轮播图

3.1 html部分

<a-tabs
 :activeKey="currentIndex"
  :animated="false"
  @change="tabChange"
>
  <a-tab-pane
    v-for="(tab, index) in bannerTabList"
    :key="index"
    :tab="tab"
  ></a-tab-pane>
</a-tabs>
<el-carousel
  @change="changeCampus"
  arrow="always"
  :interval="3000"
  ref="carouselRef"
  autoplay
  type="card"
  indicator-position="none"
  height="400px"
  style="width:100%;margin:0 auto;"
>
  <el-carousel-item v-for="(item, index) in bannerList" :key="item">
    <div
      class="medium"
      :class="[
        index == (currentIndex - 1 + 5) % 5
          ? 'leftCls'
          : index == (currentIndex + 1) % 5
          ? 'rightCls'
          : '',
      ]"
    >
      <img :src="item" alt="" />
    </div>
  </el-carousel-item>
</el-carousel>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

3.2 script部分

data(){
	return{
	  currentIndex: 0,
      bannerList: [
        require('@/assets/img/banner/1.png'),
        require('@/assets/img/banner/2.png'),
        require('@/assets/img/banner/3.png'),
        require('@/assets/img/banner/4.png'),
        require('@/assets/img/banner/5.png'),
      ],
      bannerTabList: ['新能源', '电子通讯', '汽车射频', '医疗电子', '智能穿戴'],
	}
},
methods:{
	//点击tab时，切换到指定的图片
	tabChange(val) {
      this.$refs.carouselRef.setActiveItem(val);
    },
    //轮播的时候会更改当前正中心显示的图片的索引，这个就是currentIndex
    changeCampus(val) {
      this.currentIndex = val;
    },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

注意：在data中引入图片时，需要用require来引入，而且图片一般都放在assets中，作为静态文件存在。

3.3 css部分

.medium img {
  width: 100%;
  object-fit: cover;
}
/deep/.el-carousel__item.el-carousel__item--card.is-in-stage {
  background: #fff !important;
}
/deep/.el-carousel__item.el-carousel__item--card.is-in-stage .medium.rightCls {
  transform: translateX(52%) scale(1) !important;
}
/deep/.el-carousel__item.el-carousel__item--card.is-in-stage .medium.leftCls {
  transform: translateX(-52%) scale(1) !important;
}
/deep/.el-carousel__arrow {
  border-radius: 0 !important;
  background: #3a5fc9 !important;
}
/deep/.el-carousel__arrow--left {
  left: calc(21.5%) !important;
}
/deep/.el-carousel__arrow--right {
  right: calc(21.5%) !important;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

完成！！！

如果有更好的插件，可以推荐给我哈，谢谢。