美文网首页让前端飞
使用swiper实现不完全覆盖轮播图

使用swiper实现不完全覆盖轮播图

作者: 新林吃遍世界 | 来源:发表于2017-10-19 17:22 被阅读0次
    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; 变大变小动画过渡

    相关文章

      网友评论

        本文标题:使用swiper实现不完全覆盖轮播图

        本文链接:https://www.haomeiwen.com/subject/dtqpuxtx.html