vue 卡片轮播 中间大两边小 复制代码就可使用

vue开发中遇到类似原生这种卡片轮播,中间大两边小的需求

vue 卡片轮播 中间大两边小 复制代码就可使用_第1张图片

网上搜了下,很多都是修改前一个和后一个的高度,然后设置了margin-top,但个人感觉这样病不能保证很好的居中,在研究了官网的demo后,发现https://www.swiper.com.cn/demo/240-effect-coverflow.html这个很好,可以实现需求,而且比网上那种那更好些。

1.安装swiper

cnpm install --save-dev [email protected] (此处注意不要使用npm install swiper,安装4.x的版本会在ie和某些手机的浏览器显示白屏) 

2.页面的代码

 

 

你可能感兴趣的:(vue 卡片轮播 中间大两边小 复制代码就可使用)