swiper炫酷_swiper3d横向滚动多张炫酷切换banner

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

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

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

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

我的完成效果：

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

上代码：(博客园不好调整代码缩进，将就着看哈

1

2

3

4

5

6

7

8

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的一样，能自动滚，也能手机触摸手滑滚动

总结

以上是生活随笔为你收集整理的swiper炫酷_swiper3d横向滚动多张炫酷切换banner的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。