这是一款基于Gordito Carousel 与 CSS 运动路径技术实现的沿曲线移动的旅行相册轮播。米色背景上铺着一条弯曲公路，旅行照片像明信片一样沿道路展开，当前站点在中央放大，远处卡片逐渐缩小、淡出。轮播组件负责拖拽、吸附和循环切换，CSS 运动路径决定卡片在道路上的位置。按钮与站点计数配合使用，既有相册浏览方式，也保留旅途叙事的视觉线索。

曲线公路相册的三种浏览方式

道路随容器尺寸重算。脚本同时更新 SVG 路面与卡片使用的路径，让照片和公路在调整窗口时仍能对齐。
距离决定展示层次。卡片离当前站点越远，缩放、透明度和旋转角度就越明显，中心照片的文字说明单独突出。
支持多种切换入口。可以拖动、点击附近卡片或使用上一站和下一站按钮，列表在末尾继续循环。

旅行卡片怎样始终贴着道路移动

道路不是预先画好的固定图片。roadPath 根据归一化坐标生成贝塞尔路径，再以中心对称方式补齐另一半，保持当前站点位于画面中间。轮播组件持续提供偏移量，注册后的自定义属性可以平滑过渡，拖拽时则关闭补间，让卡片跟随指针即时移动。

offset-rotate: 0deg;

沿途相册的图片与曲线如何替换

照片、地点名称和短说明位于 index.html，img 保存本地图片；曲线路径的控制点在 script.js 的 HALF_ROAD 中。卡片宽度、站点间距和切换时长在 style.css 调整，替换为品牌故事、游记或项目节点时，可以保留道路隐喻，也可以重新设计路径外观。

曲线路径轮播的设备适配问题

为什么旧浏览器里卡片位置不正确？

排布依赖 CSS 运动路径、容器单位和自定义属性动画等特性。建议使用新版浏览器，并在目标设备检查；不支持相关特性的环境需要另外准备普通横向轮播布局。

手机能用手指拖动吗？

组件带有拖拽处理，布局也按可用宽度调整卡片尺寸。按钮仍保留为明确的切换入口；接入已有页面时，要检查父容器的触摸和滚动设置是否冲突。

可以添加更多站点吗？

可以在现有列表结构中继续补充照片与说明，组件会按列表更新总数。站点很多时，建议控制图片体积，并注意循环时的可见卡片数量。

适合旅行相册、品牌历程与沿途故事展示。完整路径计算和轮播接入方式可下载查看。