Carousel Container
Swiper
适用场景#
用于快速在页面搭建轮播图展示效果，并支持轮播图的跳转、播放配置。
Usage
Carousel Container Default Display
When there is a scenario requiring data-driven carousel content management, the Carousel Container component can be utilized. The operational procedure is as follows:
Add a Carousel Container component in the editing area. You will see that an image component is automatically generated below the Carousel Container.
Click the image component below the Carousel Container to modify the image information.
For more carousel features, please use the carousel component.
Implementing Advanced Carousel Scenarios Using Carousel Container
We can implement more complex carousel scenarios using the Carousel Container, as shown in the figure below:
Add a General Container component under the child node of the Carousel Container, and add image and button components under the child node of the General Container component.
Set the positioning mode of the button component to fixed and adjust its position to achieve similar complex carousel scenarios.
Property Introduction
组件接收的外部传入的属性
属性名 | 属性标识 | 类型 | 说明 |
|---|
| 自动切换时间间隔（毫秒） | interval | number | 配置轮播图滚动的时间间隔，时间单位为ms 示例：5000 |
| 纵向轮播 | vertical | boolean | 开启后，轮播的滚动方式将会由横向滚动变更为纵向滚动 示例：false |
| 自动播放 | autoplay | boolean | 开启后，轮播图将会自动根据配置的时间间隔进行自动滚动，关闭后则轮播图仅支持通过点击锚点的方式进行切换 示例：true |
| 循环切换(WEB端) | loop | boolean | 开启之后，轮播图支持循环切换，仅web端生效。 开启之后，轮播图支持循环切换。 示例：true |
| 锚点激活色 | indicatorActiveColor | string | 更改锚点选中时的颜色 示例："rgba(0, 0, 0, 0.9)" |
| 锚点颜色 | indicatorColor | string | 更改锚点普通状态下的颜色 示例："rgba(200, 200, 200, 0.9)" |
| 滑动动画时长 | duration | number | 更改轮播图切换时的滑动动画时长 示例：500 |
| 当前所在滑块的 index | current | number | 更改轮播图的默认展示位置，0为默认展示第一张轮播图，以此类推 示例：0 |
| 衔接滑动(小程序) | circular | boolean | 关闭后，将无法循环滑动，仅小程序端生效。 是否采用衔接滑动 示例：true |
| 导航锚点 | indicatorDots | boolean | 开启/关闭轮播图锚点 示例：true |
| 渲染模式(小程序) | layoutType | string | 渲染模式，小程序 Skyline 特有属性 示例："normal" |
| 指定动画类型(小程序) | transformType | string | layout-type 为 transformer 时指定动画类型，小程序 Skyline 特有属性 示例："scaleAndFade" |
| 前边距(小程序) | previousMargin | string | 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值 示例："0px" |
| 后边距(小程序) | nextMargin | string | 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 示例："0px" |
| 缓动动画类型(小程序) | easingFunction | string | 指定 swiper 切换缓动动画类型 示例："default" |
Event Introduction
组件暴露的事件，可以监听组件的事件来触发一些外部的动作
事件名 | 事件code | 事件出参 event.detail | 适用情况 | 说明 |
|---|
| 切换 | change | object
| 兼容三端 | 通过事件可以获取到当前选中的轮播项，在该事件的处理方法中可以通过 event.detail.current 来获取当前轮播项所在的index |
Component Usage Limitations
- Due to styling limitations on the Mini Program side, the image height in the Carousel Container must not be set to auto; otherwise, rendering will fail.
- On the web end, loop switching can be disabled. After disabling, swiping right to the last slide will not allow further right swiping. If autoplay is enabled while loop switching is disabled, playback will stop after the last slide is played.
- Due to limitations in the Mini Program environment, loop switching is not supported, but continuous swipe is supported. When continuous swipe is disabled in the Mini Program environment, swiping right to the last slide will not allow further right swiping. If autoplay is enabled while continuous swipe is disabled, after playing the last slide, it will continue playing from the first slide.
- Due to Mini Program limitations, the Carousel Container does not support rounded corner styling, but you can set images within the Carousel Container to have rounded corner styles.