swiper卡片3D过渡效果

976 阅读1分钟

最近经常接到轮播图3D效果的需求, 特在此记录一下以备之后使用。

具体实现效果如下:

image.png

主要通过slidesPerView设置需要显示轮播的数量,并通过swiper-slide-prevswiper-slide-next两个类名对上一张下一张轮播进行缩小, 达到中间大而两边小的效果。如果想调整前后两张轮播的上下位置,可以使用translateY()进行设置。

作者:沧海的雨季
链接:juejin.cn/post/690481…
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

安装

首先安装Swiper包npm i swiper

引入

我目前安装的最新版Swiper是3.4.2版的, 如果是6.x的版本在这里务必要注意如果需要分页器以及自动轮播都是需要引入对应在Swiper里的组件的。

局部引入
复制代码
import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";