轮播图

Carousel

UI 组件也叫：走马灯、幻灯片、Swiper、Slider、Banner 轮播

一句话：在同一块区域里轮流展示多张图片或卡片，可以自动切换，也可以左右滑动或点圆点切换。

详细解释

轮播图把几张横幅或卡片叠在同一个位置，一次只露出一张，按时间自动切到下一张，或让用户点左右箭头、底部小圆点、手指滑动来切换。Element Plus 里叫走马灯（Carousel），很多项目直接用 Swiper 这个库实现。常见于首页顶部的活动横幅、商品详情页的多图展示、用户评价的横向滚动。

轮播的问题是：大多数用户只看第一张，后面几张曝光很低，自动切换还可能在用户阅读时突然换走内容。所以重要信息不要只放在第二、三张；如果几张内容都重要，改成 卡片网格 平铺更好。自动播放要在鼠标悬停时暂停，并给出明显的切换指示。

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

首页顶部做一个全宽轮播图，高 360px，共 4 张横幅，每 5 秒自动切换，鼠标悬停时暂停；左右两侧有半透明箭头按钮，底部居中有小圆点指示当前第几张，可点击跳转；手机上支持左右滑动，图片按比例裁切不变形。

由可视窗口、横向排列的多张幻灯片、左右切换箭头和底部指示圆点组成。

插件本地识别时匹配的 CSS 选择器（标签、ARIA role、常见组件库 class）。