# 轮播组件

✨模板自由制作入口：作品预览区>>>轮播组件按钮 或 图层区>>>Carousel Component

<figure><img src="/files/BBynbwmDuIdhDppKP3Dr" alt=""><figcaption></figcaption></figure>

✨空白制作入口：玩法模板>>>组件库>>>轮播组件

<div align="left"><figure><img src="/files/Djtm0wiMALqjhpDPA8rU" alt=""><figcaption></figcaption></figure></div>

相关案例教学可查阅  [轮播组件-空白制作教程](/playturbo-an-li-jiao-xue-ji-di/ke-wan-zi-you-bian-ji-qi-an-li/lun-bo-zhan-shi-wan-fa-an-li/lun-bo-zu-jian-kong-bai-zhi-zuo-jiao-cheng.md)

####

## <mark style="color:blue;">一、轮播组件通俗介绍</mark>

* 当前，【**模板自由制作**】和【**空白制作**】都支持使用"轮播组件"。使用【模板自由制作】，您可以基于原模板的玩法对组件进行调整；
* 使用【空白制作】或新增轮播组件，最少需完成组件的 「轮播样式选择」、「资源组」、「坑位设置」、「交互方式」、「高级设置」等参数设置，轮播组件才可正式生效
* <mark style="color:red;">注意：同个场景仅支持添加一个组件，但可跨场景添加组件 或 复制组件</mark>

####

## <mark style="color:blue;">二、轮播组件适用玩法示例</mark>

"轮播组件"适用于 要素自动/手动轮播类的玩法

* [示例1 - 抓住优惠券](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001596%252F13604%252Fpv%252F24%252F10%252F12%252F670a2e7d3f0fa%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E6%8A%93%E4%BD%8F%E4%BC%98%E6%83%A0%E5%88%B8\&language=undefined)
* [示例2 - 多要素展示切换](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001711%252F13679%252Fpv%252F24%252F10%252F28%252F671f43c686352%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E5%A4%9A%E8%A6%81%E7%B4%A0%E5%B1%95%E7%A4%BA%E5%88%87%E6%8D%A2\&language=undefined)
* [示例3 - 丝滑循环展示](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001666%252F13599%252Fpv%252F24%252F10%252F11%252F6708efe81ab47%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E4%B8%9D%E6%BB%91%E5%BE%AA%E7%8E%AF%E5%B1%95%E7%A4%BA\&language=undefined)
* [示例4 - 循环展示](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001723%252F13713%252Fpv%252F24%252F11%252F07%252F672c555595291%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E5%BE%AA%E7%8E%AF%E5%B1%95%E7%A4%BAv4\&language=undefined)

####

## <mark style="color:blue;">三、轮播组件使用说明</mark>

「轮播组件」可调整的参数分四部分：外观、动画、**轮播设置**、事件

### 1.外观

* 组件是否启用：可在「外观」参数下通过调节此开关来启用/禁用轮播组件（默认启用）
* 超出范围是否裁剪：若打开「超出范围是否裁剪」，则超出组件范围的图片不予展示（默认不裁剪）
* 其他参数的使用同常规图层一样，在此不作说明。需注意：当调整轮播组件的外观参数(如位置大小)时，轮播组件内的所有图层会跟着一起变化

<div align="left"><figure><img src="/files/T7T3iuyJe3gRJh94JdvP" alt=""><figcaption></figcaption></figure></div>

### 2.动画

在此处设置的动画是对整个轮播组件生效的，具体的使用同常规图层一样，在此不作说明

### 3.轮播设置

轮播设置包含五部分参数，需先进行「样式选择」设置，再进行「资源组」、「坑位设置」、「交互方式」、「高级设置」等参数的设置

<mark style="color:red;">注意：「轮播设置」为轮播组件最核心的参数，请务必将各部分设置完成</mark>

<div align="left"><figure><img src="/files/gU212W8GW0h3iY8RUL4U" alt=""><figcaption></figcaption></figure></div>

#### <mark style="background-color:red;">3.1 样式选择</mark>

当前支持五种轮播样式（每种轮播样式的具体效果可参考缩略图的动画）

* **常规轮播：**&#x5361;片默认间隔排列 同时展示多张，切换时进行**移动**的轮播
* **原地缩放轮播：**&#x5361;片默认处于相同位置 单次展示一张，切换时进行**原地缩放**的轮播
* **滚动缩放轮播：**&#x5361;片默认密集排列，切换时进行**缩放&移动**的轮播
* **透明度轮播：**&#x5361;片默认间隔排列 单次展示一张，切换时进行**移动&透明度变化**的轮播
* **渐隐缩放轮播：**&#x5361;片默认间隔排列 单次展示一张，切换时进行**缩放&移动&透明度变化**的轮播

<div align="left"><figure><img src="/files/4oqJjm89iV9ISqYfnY2L" alt=""><figcaption></figcaption></figure></div>

#### <mark style="background-color:red;">3.2 资源组</mark>

「资源组」用来添加所要展示的要素 及 设置要素参数。

<mark style="color:red;">一个资源组可包含一个或多个轮播组；一个轮播组支持添加一张或多张图片</mark>

<mark style="background-color:red;">**3.2.1 单个轮播组**</mark>

* 上传轮播图片：点击+号，可从资产库或项目资产中选择图片加入轮播组
* 替换轮播图片：点击图示按钮(蓝色)，可替换当前轮播图片

<div align="left"><figure><img src="/files/Hj51am3n5DA1S2m72BkA" alt=""><figcaption></figcaption></figure></div>

* 支持设置 「显示」/「隐藏」 轮播组或轮播图片
* 支持 删除 轮播组或轮播图片
* 支持 拖拽移动 轮播组或轮播图片的位置

<div align="left"><figure><img src="/files/qjaNHkpEHuK65IzDqvVl" alt=""><figcaption></figcaption></figure></div>

* 点击轮播组，调起轮播组的「外观」参数弹窗，可调整轮播组的整体尺寸位置及「坑位尺寸」和「坑位间隔」
  * **坑位尺寸：**&#x5373;每个图片坑位的尺寸大小。放在其中的图片按最长边进行适配
  * **坑位间隔：**&#x51B3;定了每个坑位中心点之间的间距
  * 坑位缩放：对应轮播组的尺寸比例，仅做参考作用，不支持调整

<div align="left"><figure><img src="/files/Gw2s95xz3CKx2WdAR8zZ" alt="" width="504"><figcaption></figcaption></figure></div>

效果示例：

<div align="left"><figure><img src="/files/9nc2VF5qRQRQxLltxpUp" alt="" width="563"><figcaption></figcaption></figure></div>

<div align="left"><figure><img src="/files/5XpQ53erTMprcVWBixM1" alt="" width="563"><figcaption></figcaption></figure></div>

* 点击单个轮播图片调起弹窗，可设置该图片的「资源类别」及「事件」
* 需先【添加类别】，自定义类别后，再选择对应类别
* 资源类别用于后续事件判定成功or失败

<div align="left"><figure><img src="/files/FKKab5JmFmSYLhuwVHDF" alt=""><figcaption></figcaption></figure></div>

示例：如[本示例素材](https://tinyurl.com/5evemtcd)，就是添加了三种资源类别：「粉色」、「灰色」、「绿色」三套造型

可设置：切换轮播，当角色的头部、身体、脚部变为同一套造型（即同一种资源类别）时，触发后续事件

<div align="left"><figure><img src="/files/vO3oI99iHU5IqdIiE3Gk" alt=""><figcaption></figcaption></figure></div>

<mark style="background-color:red;">**3.2.2 添加轮播组**</mark>

* 添加轮播组：点击图示按钮，都可新建一个轮播组
* 轮播组之间支持拖动调整位置
* 添加多个轮播组的使用场景：如[本示例素材](https://tinyurl.com/5evemtcd)，用多个轮播组控制不同身体部位造型的轮播切换

<div align="left"><figure><img src="/files/9LDTdVbSLkTMXCYiiVgk" alt=""><figcaption></figcaption></figure></div>

#### <mark style="background-color:red;">3.3 坑位设置</mark>

坑位设置包含「排列方式」和「坑位数」

* **排列方式：**&#x5355;选。可选水平或垂直
  * 若选择水平，则轮播为左右方向轮播
  * 若选择垂直，则轮播为上下方向轮播
* <mark style="color:red;">**坑位数：**</mark><mark style="color:red;">决定了轮播时的坑位数量</mark>
  * 注意：最中间的为坑位1。如坑位数量为5，则从左到右坑位数对应分别为4-5-1-2-3

<div align="left"><figure><img src="/files/z5OaKobprdPqMxPhsi3X" alt=""><figcaption></figcaption></figure></div>

💡"**坑位数"与"已上传的图片数量"的关系**

* 当图片数量>坑位数时：部分图片会被隐藏。随着轮播的进行，一部分图片隐藏，另一部分图片被展示出来进行轮播
* 当图片数量=坑位数时：所有图片都被展示在对应坑位上进行轮播
* 当图片数量<坑位数时：所有图片都会被展示，由于图片数较少，会按已有资源的顺序放置在各个坑位上

<div align="left"><figure><img src="/files/VWsZRhon3fg9f2BpWDCp" alt=""><figcaption></figcaption></figure></div>

#### <mark style="background-color:red;">3.4 交互方式</mark>

交互方式包含「播放设置」和「交互方式」

* **播放设置：**&#x81EA;动或手动，最少选择一项，支持多选
  * 只选择【自动】：无需再设置「交互方式」。轮播会自动播放
  * 只选择【手动】：需继续选择「交互方式」。轮播需通过玩家手动进行切换
  * 同时选择：需继续选择「交互方式」。既会自动轮播，又支持手动切换轮播

<div align="left"><figure><img src="/files/JFr2NiA5QgZUORxvDYIy" alt=""><figcaption></figcaption></figure></div>

* **交互方式**(播放设置勾选"手动"后选择)：点击或拖拽，最少选择一项，支持多选
  * 只选择【拖拽】：支持拖拽切换
  * 只选择【点击】：通过点击切换按钮进行切换
  * 同时选择：既支持点击按钮切换 同时支持拖拽切换

<div align="left"><figure><img src="/files/t8i0yaxNp8MzjxSmN5Ly" alt=""><figcaption></figcaption></figure></div>

* **切换按钮**(勾选"点击"后进行设置)
  * 支持 显示/隐藏 按钮
  * 点击替换按钮，支持从资产库或项目资产中选取图片替换按钮样式
  * 点击单张按钮图片，调起弹窗，可设置按钮的外观

<div align="left"><figure><img src="/files/MR9l7wWTHrL9jaDr5M7m" alt="" width="515"><figcaption></figcaption></figure></div>

#### <mark style="background-color:red;">3.5 高级设置</mark>

可对轮播动画的参数进行调整

* **动画停留时间：**<mark style="color:red;">自动轮播特有参数。</mark>该参数决定了间隔多久切换下一张图片（如设置为1s，则每切换完成后再过1s，切换下一张图片）
* **动画播放时长：**&#x5F53;设置为<mark style="color:red;">自动轮播或点击轮播</mark>时，该参数决定了动画播放的时长（如设置为0.5s，则切换图片的动画过程时长为0.5s）
* **透明度：**&#x6700;大值、最小值决定该动画播放过程中透明度的最大、最小值。数值范围为0 - 1
* **缩放：**&#x6700;大值、最小值决定该动画播放过程中缩放度的最大、最小值。数值范围为0 - 1

💡注意：调整透明度和缩放值参数时，效果会在画布中实时展示

<div align="left"><figure><img src="/files/ke6hw9D93INDqU2Dhlt3" alt=""><figcaption></figcaption></figure></div>

### 4.事件

「轮播组件」存在独特的触发事件和响应事件

**触发事件**包含：「切换轮播时」、「轮播到某一资源」、「轮播到某一类别的资源」

相关的**响应事件**包含：「启用/禁用轮播组件」、「启用/禁用轮播组」、「暂停/播放轮播组」、「重新轮播」、「删除轮播资源」、「停留时间」

<div align="left"><figure><img src="/files/gLxVoC7JF7CwfAxUm5e3" alt=""><figcaption><p>触发事件</p></figcaption></figure></div>

<div align="left"><figure><img src="/files/WdvTGfDa44Hgqnt6Hiz3" alt=""><figcaption><p>响应事件</p></figcaption></figure></div>

#### <mark style="background-color:red;">4.1 触发事件</mark>

<table><thead><tr><th width="184">触发事件</th><th width="317">触发设置</th><th>截图</th></tr></thead><tbody><tr><td><strong>切换轮播时</strong></td><td><p>-需选择对应的轮播组</p><p>-触发时机为：选择的轮播组，轮播完成停住时，触发响应事件</p></td><td><img src="/files/sJpr7LRVKZ7xq7PJHQvO" alt="" data-size="original"></td></tr><tr><td><strong>轮播到某一资源</strong></td><td><p>-需选择对应的轮播组与对应的组内资源</p><p>-触发时机为：特定资源轮播完成停住时，触发响应事件</p></td><td><img src="/files/8MsuvFBfgA2DuGVNgfFA" alt="" data-size="original"></td></tr><tr><td><strong>轮播到某一类别的资源</strong></td><td><p>-需选择对应的轮播组与对应的资源类别</p><p>-触发时机为：将对应资源类别的资源轮播到展示位时</p></td><td><img src="/files/PEQ1GLJqf8CICex807eU" alt="" data-size="original"></td></tr></tbody></table>

#### <mark style="background-color:red;">4.2 响应事件</mark>

<table><thead><tr><th width="184">响应事件</th><th width="317">响应设置</th><th>截图</th></tr></thead><tbody><tr><td><strong>启用/禁用轮播组件</strong></td><td>若禁用，则<strong>所有轮播组</strong>停止轮播，并禁用相关的轮播功能，并禁用轮播组内图片资源的事件；启用则相反</td><td><img src="/files/Ks6IzlsLp9LejxHQpIhZ" alt="" data-size="original"></td></tr><tr><td><strong>启用/禁用轮播组</strong></td><td><p>-需选择对应的轮播组</p><p>-若禁用轮播组，则<strong>被选中的轮播组</strong>停止轮播，并禁用相关的轮播功能，并禁用轮播组内图片资源的事件；启用则相反</p></td><td><img src="/files/sO9n5iEyGXdaP8cyXzmU" alt="" data-size="original"></td></tr><tr><td><strong>暂停/播放轮播组</strong></td><td><p>-需选择对应的轮播组</p><p>-若暂停轮播组，若<strong>被选中的轮播组为「自动」轮播</strong>，则暂停自动轮播；播放则相反</p></td><td><img src="/files/b4IGwmsSv4pgJ4lUdOqg" alt="" data-size="original"></td></tr><tr><td><strong>重新轮播</strong></td><td><p>-需选择对应的轮播组</p><p>-<strong>所选的轮播组</strong>恢复到初始状态开始轮播</p></td><td><img src="/files/xvbu5A7edJevpAFcep8W" alt="" data-size="original"></td></tr><tr><td><strong>删除轮播资源</strong></td><td><p>-需选择对应的轮播资源</p><p>-将<strong>选中的轮播资源</strong>删除</p></td><td><img src="/files/jt6fwo3YawYBtd7wEDII" alt="" data-size="original"></td></tr><tr><td><strong>停留时间</strong></td><td><strong>若为「自动轮播」</strong>，将停留时间设置为指定时长</td><td><img src="/files/N4iX2g4OmMNjeaZJkokR" alt="" data-size="original"></td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://doc.playturbo.cn/ke-wan-gong-ju-zi-you-bian-ji-qi/zi-you-bian-ji-qi-shi-yong-zhi-nan/te-shu-gong-neng-zu-jian-ku-kuai-jie-pai-ban/lun-bo-zu-jian.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.