前端大佬帮忙看看这个如何实现

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 502 天前的主题，其中的信息可能已经有所发展或是发生改变。

同时展示 3 个罐子，可以左右滑，可循环。中间的罐子在最前面，会大一些，两侧的下一些，靠后一点，有点 3d 立体的感觉。左右滑动，罐子轮番展示。这个应该如何实现呢。

罐子

展示

滑动

大佬

14 条回复 • 2023-06-21 15:35:49 +08:00

DavZhn

2023-06-21 14:18:18 +08:00

图挂了。ZSBD

ArrayReduce

2023-06-21 14:21:29 +08:00

swiper.js 应该可以满足你的需求，你可以看看它的 demo
https://swiperjs.com/plugins#carousel-slider

superedlimited

2023-06-21 14:21:53 +08:00

关键词：视差滚动 parallax scrolling

NessajCN

2023-06-21 14:27:51 +08:00

https://codepen.io/monochromer/pen/EoabOG

nitmali

2023-06-21 14:53:16 +08:00

transform: translateY(-24px) scale(1.4)
transition: transform 1s;

nitmali

2023-06-21 14:54:09 +08:00

@nitmali 缩小
transform: translateY(-24px) scale(0.8)
transition: transform 1s;

wu67

2023-06-21 15:01:20 +08:00

上面都说完了......照抄或者改改就是

bhbhxy

2023-06-21 15:06:46 +08:00

你说的这个叫旋转木马，离得最近的 scale = 1 ，离得远的 scale < 1

dudubaba

2023-06-21 15:17:39 +08:00

关键字：3D 轮播图，成品一大堆 http://www.bootstrapmb.com/tag/3dlunbo

KrisWuSkrSkr

2023-06-21 15:33:03 +08:00

@ArrayReduce 谢谢大佬

KrisWuSkrSkr

2023-06-21 15:33:19 +08:00

@superedlimited 感谢大佬

KrisWuSkrSkr

2023-06-21 15:34:56 +08:00

@NessajCN 感谢

KrisWuSkrSkr

2023-06-21 15:35:30 +08:00

@bhbhxy 谢谢大佬，终于知道怎么描述这种了

KrisWuSkrSkr

2023-06-21 15:35:49 +08:00

@dudubaba thanks