1 名字起的这么高大上,究竟是什么效果呢,先来张图片欣赏一下
QQ图片20171019165150.png【这种轮播的方式突出了中间的内容(重点),可以滑动查看其他的内容,广泛用在app上,如美丽说的正在流行的一些东西,一行展示不完,就采用这种滑动的形式】
swiper怎么实现这种效果呢
1 slidesPerView 设置slider容器能够同时显示的slides数量(carousel模式)。另外,支持'auto'值,会根据容器container的宽度调整slides数目。
2 initialSlide: 1, //默认显示第二个的下标
3 centeredSlides: true, //设置活动块居中
4 simulateTouch: false //默认为true,Swiper接受鼠标点击、拖动。
css 很明显,中间处于激活状态的块比较大,可以使用css3 的transform: scale(0.9) 让所有的块都缩放,给当前处于激活状态的块单独设一个样式
transform: scale(1);
-webkit-transition: transform 0.3s ease; 变大变小动画过渡
网友评论