Carousel Container
Swiper
Applicable Scenarios#
For quick page building with a carousel display effect, supporting carousel redirection and playback configuration.
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
External properties received by the component
Property Name | Property Identifier | Type | Description |
|---|
| Anchor active color | indicatorActiveColor | string | Change the color of the anchor when selected Example: "rgba(0, 0, 0, 0.9)" |
| Anchor color | indicatorColor | string | Change the color of the anchor in regular status Example: "rgba(200, 200, 200, 0.9)" |
| Sliding animation duration | duration | number | Change the sliding animation duration of the carousel during switching Example: 500 |
| Current slider index | current | number | Change the default display position of the carousel. 0 displays the first image by default, and so on. Example: 0 |
| transition slide(Mini Program) | circular | boolean | After closing, it will not be able to loop slide and only takes effect on the mini program side. whether to use transition sliding Example: true |
| Navigation anchor | indicatorDots | boolean | Enable/disable carousel anchor Example: true |
| rendering mode(Mini Program) | layoutType | string | Rendering mode Mini program Skyline unique attributes Example: "normal" |
| Specify animation type(Mini Program) | transformType | string | Specify the animation type when layout-type is transformer, a unique attribute of the mini program Skyline Example: "scaleAndFade" |
| Margin before the current item(Mini Program) | previousMargin | string | Margin before the current item, applicable to partially reveal the previous item, accepts px and rpx values Example: "0px" |
| margin-bottom(Mini Program) | nextMargin | string | back margin, applicable to partially reveal the next item, accepts px and rpx values Example: "0px" |
| Easing animation type(Mini Program) | easingFunction | string | Specify swiper easing animation type Example: "default" |
| Auto switch interval (ms) | interval | number | Configure the carousel scroll time interval in ms Example: 5000 |
| vertical carousel | vertical | boolean | Once enabled, the carousel will change from scrolling horizontally to vertically. Example: false |
| autoplay | autoplay | boolean | Once enabled, the carousel will auto-scroll automatically based on the configured time interval. After disabling, it only supports switching via anchor clicks. Example: true |
| Cycle switch(Web) | loop | boolean | Once enabled, the carousel supports cycle switch and takes effect on the web only. Once enabled, the carousel supports cycle switch. Example: true |
Event Introduction
Events exposed by the component. You can listen to component events to trigger external actions
Event Name | Event Code | Event Output Parameters event.detail | Applicable Scenarios | Description |
|---|
| switchover | change | object
| Compatible with all platforms | The currently selected loop banner item can be obtained through the event. In the handling method of this event, the index where the current loop banner item resides can be obtained via event.detail.current. |
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.