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

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

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

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

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

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

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

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

我的完成效果:

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

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

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

data数

生命周期

css(根据业务需求自行改动

如果不是使用vue的小伙伴也别着急,还是有案例可以直接用js+html的

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

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

未经允许不得转载:一点博客-青梅煮码-共享博客 » swiper3d横向滚动多张炫酷切换banner
分享到:
赞(1) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏