> For the complete documentation index, see [llms.txt](https://helps.ptengine.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://helps.ptengine.com/cn/experience/campaign/create-new-1/stickybar-carousel.md).
# 悬浮条轮播模式
## 开始之前
* 轮播只对**悬浮条**有效，弹窗没有这个模式
* **一条轮播悬浮条最多 10 张幻灯片**
* **关闭轮播会删掉其余幻灯片**，只保留当前正在编辑的那一张 —— 开之前想清楚
* 轮播动画在编辑器画布里**不实时播放**，必须用“预览”看效果
***
## 什么是轮播模式
轮播模式可以把一条悬浮条变成多张**幻灯片**，在同一条悬浮条中自动或手动切换展示。当你有多个卖点、多张优惠券或多条公告想要在一条有限的横幅里依次呈现时，轮播模式非常合适。
常见使用场景：
* 多个促销卖点循环展示，让用户在不占用更多页面空间的前提下看到更多信息；
* 多张优惠券 / 活动轮流曝光；
* 公告、通知滚动播报。
{% hint style="info" %}
关闭轮播模式时，系统会保留当前正在编辑的这张幻灯片作为普通的静态悬浮条，其余幻灯片会被删除。
{% endhint %}
## 开启轮播模式
在悬浮条编辑器中，通过操作工具条上的 **“轮播模式”** 开关即可开启或关闭轮播。
## 轮播布局：全宽 / 内容居中
轮播布局决定了整条轮播条的整体呈现思路，建议**先确定布局**，再去编辑各张幻灯片。在“轮播设置”顶部即可选择：
### 全宽（默认）
每张幻灯片的背景**铺满整条悬浮条**，切换时**整条一起滑动**——背景和内容作为一个整体左右（或上下）切换。
* **适用场景**：每屏是一套完整的整屏视觉、且各屏风格/背景不同。例如多张不同主视觉的促销 Banner（红色大促屏 → 黑色新品屏 → 绿色会员屏）轮流展示，想让**整条横幅整体焕新**。
* **视觉特点**：切换时你能看到**整条背景跟着一起动**。
### 内容居中
整条悬浮条使用**一层统一背景**（铺满全宽、切换时**不动**），只有**内容和左右箭头**在中心的一个固定宽度内滑动切换。
* **适用场景**：想保持整条**统一底色/品牌色**（如全宽黑条），只轮播其中的**文案 / 信息**，视觉更克制统一；适合公告轮播、多条卖点文字轮播，或宽屏下不希望内容被拉得太散。参考电商站常见的顶部通知条（全宽深色条 + 中间文字带左右箭头切换）。
* **视觉特点**：**背景固定不动**（全宽统一底色），只有**中间内容在切换**，两侧留白仍是统一底色。
* **配套设置**（选内容居中后出现）：
* **整条背景（铺满全宽）**：设置那层统一底色（色值）；
* **内容宽度**：内容与左右箭头的居中最大宽度，默认 **980（PC）/ 375（移动）**，可填数字调整。超出该宽度的内容在预览/上线时会被裁剪（编辑器里以居中虚线框标出安全范围）。
{% hint style="info" %}
两种布局下每张幻灯片仍可有自己的背景；内容居中模式下，每屏背景叠加在统一底色之上、只作用于中心内容区（透明时透出统一底色）。布局的实际效果请在 **“预览”** 中查看。
{% endhint %}
## 轮播设置详解
在配置面板的“轮播设置”中，可以调整轮播的动画与交互表现。
{% hint style="warning" %}
动画与轮播效果需要在 **“预览”** 中查看实际表现，编辑器画布中不会实时播放。
{% endhint %}
* **过渡效果**：切换幻灯片时的动画方式，可选 *滑动 / 垂直滑动 / 淡入淡出 / 缩放淡入*；
* **指示器**：底部分页指示器样式，可选 *无 / 圆点 / 分数 / 进度条*；选择圆点时还可设置圆点大小、指示器颜色和选中点颜色；
* **左右箭头**：显示左右切换箭头，可设置箭头大小与颜色；
* **自动播放** 与 **动画速度**：开启后幻灯片自动切换，动画速度控制单次切换动画的时长（单位毫秒）；
* **循环播放**：播放到最后一张后回到第一张，循环轮播；
* **展示时长**：默认所有幻灯片使用统一的全局延迟；如需让某一张停留更久或更短，可在该幻灯片设置中开启 **“自定义时长”** 单独设置。
## 管理幻灯片
开启轮播后，配置面板中会出现 **“幻灯片”** 列表，你可以在此切换、添加、删除幻灯片，以及**拖拽调整播放顺序**。
### 添加幻灯片
点击“添加幻灯片”，有三种创建方式：
* **复制当前幻灯片**：保留当前幻灯片的背景、内容和点击动作，适合制作风格一致的多张幻灯片；
* **从空白开始**：仅保留默认布局，从空内容开始设计；
* **从模板选择**：选用倒计时 / 优惠券 / 促销等预设布局快速创建。
### 独立编辑每张幻灯片
每张幻灯片都可以**单独编辑**。切换幻灯片标签，即可在画布上分别编辑各屏的内容元素（文字、图片、按钮等）。
在幻灯片列表中展开某一张，还可以配置这张幻灯片**独有的设置项**：
* **背景**：可选颜色（支持渐变）或图片；选择图片时还可上传/更换图片并调整不透明度。此背景仅作用于当前这张幻灯片，各屏互不影响；
* **点击动作**：为整张幻灯片设置点击动作，如跳转链接或事件监测；
* **展示时长**：勾选 **“自定义时长”** 后，可单独设置这张幻灯片的停留时间（单位毫秒）；不勾选则沿用轮播的全局延迟。
### 调整播放顺序
在幻灯片列表中，通过拖拽即可调整各张幻灯片的先后顺序，轮播将按照列表中的顺序依次播放。
### 关于高度
轮播条中所有幻灯片**等高**，整体高度会跟随内容最高的那一张自动统一，从而保证切换时不会出现高度跳动。你也可以在 **“位置&大小”→“浮条布局”→“高度”** 中手动调整整条轮播条的高度。
## 注意事项
* 轮播的动画效果请通过 **“预览”** 确认，编辑器画布中不实时播放；
* 一条轮播悬浮条最多支持 **10 张**幻灯片。
***
## 做完之后怎么确认
* 点“预览”在 PC 和手机上各看一遍 —— 重点确认切换节奏、以及最高的那张幻灯片有没有把整条撑得过高
* 发布后在[体验报告](/cn/experience/campaign/experience-report-detail.md)看展示与互动数据
* 不显示 → [体验无法正常显示](/cn/faq/experience-edit/campaign-not-displaying.md)
***
## 相关页面
* [弹窗创建方法](/cn/experience/campaign/create-new-1.md)
* [创建弹窗/悬浮条的方法](/cn/experience/campaign/create-new-1/popup-bar-creation.md)
* [显示/停止时间设置](/cn/experience/campaign/create-new-1/display-timing.md)
* [弹窗创建的技巧](/cn/experience/campaign/create-new-1/tips.md) — 悬浮条占屏多大合适
* [体验预览](/cn/experience/campaign/preview.md)