swiper3d横向滚动多张炫酷切换banner

最近有了个新需求，swiper3d横向滚动多张炫酷切换banner要和elementUI里边走马灯的卡片化card 相似，可是还须要h5手机触摸滚动啊啊啊啊，昨天折腾了半个早上总算完成，今天乖乖跑来mark一下。一眨眼过了一个月，9月这段期间项目多，还带着小徒弟作项目，一边教还要一边赶进度。真的是超级无敌累，不过看着他慢慢有所成长也是有点欣慰的。终归仍是本身懒，放草稿箱里的文章总结就一直放着了没继续着重去写。

最近这段时间主要作h5页面，对接公众号。用的是vue来写的h5项目页面，这个项目实际上是小徒弟作的……然而加了一堆的乱七八糟的插件的方法，如今还得从新梳理。否则被老大发现的话会死得很惨。

其中有一个需求是要求像elementUI里边走马灯的卡片化card，以下：

 

 可是除了须要这种3d效果以外，还须要h5手机端手动滑动，element是不支持的。固然我只是举个栗子，个人项目是要剔除了element直接用vux的。加上项目里边，有横向自动滚动相册、多个banner图。因此我这块才把目光放到swiper

使用npm安装，请直接去npm里边查看  这里能够点击→  https://www.npmjs.com/package/vue-awesome-swiper

个人完成效果：

 

 固然有人喜欢把下边的黑色阴影用分页器加上box shadow 四周阴影呈现出来，我这块是用了一张阴影图，没有使用到分页器。并且自动滚的3d效果确实比element 走马灯card还要炫酷，我这里用的是swiper3。

上代码：（博客园很差调整代码缩进，将就着看哈）

html

1 <div class="successNav">
2   <swiper :options="swipersuccess">
3     <!-- <swiper-slide v-for="(item,index) in indexContentTwo[2].children" :key="index"><img :src="item.picture" alt=""></swiper-slide> -->
4     <swiper-slide><img src="../assets/images/img/banner.png" alt=""></swiper-slide>
5     <swiper-slide><img src="../assets/images/img/group3.png" alt=""></swiper-slide>
6             
7   </swiper>
8</div>

 

data数据

data(){
    return{
        swipersuccess:{
          effect:"coverflow",
          grabCursor: true,
          watchSlidesProgress: true,
          centeredSlides: true,
          loop: true,
          loopedSlides: 3,
          slidesPerView: 3,
          autoplay: {
            delay: 3000,//自动播放速度
            disableOnInteraction: false//鼠标移上去时是否还继续播放
          },
          coverflowEffect: {
            // rotate: 50,
            // stretch: 0,
            // depth: 500,
            // modifier: 1,
            // slideShadows : true
            rotate: 30,
            stretch: 0,
            depth: 60,
            modifier: 6,
            slideShadows : false
          },
      },
    }
}

 

生命周期

computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
},

 

css（根据业务需求自行改动）

.successNav .swiper-slide.swiper-slide-active img {
  transform: scaleX(1.6);
  border-radius: 5px;
}
.successNav .swiper-slide.swiper-slide-duplicate-prev img,
.successNav .swiper-slide.swiper-slide-next img,
.successNav .swiper-container-3d .swiper-slide-shadow-right,
.successNav .swiper-container-3d .swiper-slide-shadow-left,
.successNav .swiper-slide.swiper-slide-prev img,
.successNav .swiper-slide.swiper-slide-prev{
  border-radius: 5px !important;
}

 

 

若是不是使用vue的小伙伴也别着急，仍是有案例能够直接用js+html的

 

这里好像插入不了压缩包诶，有须要的小伙伴能够留邮箱发哈，有swiper4和swiper3两个版本的html+js的写法。和前面适用vue的同样，能自动滚，也能手机触摸手滑滚动