Skip to main content

Carousel Container

Swiper

Applicable Scenarios#

For quick page building with a carousel display effect, supporting carousel redirection and playback configuration.

Usage

When there is a scenario requiring data-driven carousel content management, the Carousel Container component can be utilized. The operational procedure is as follows:

  1. Add a Carousel Container component in the editing area. You will see that an image component is automatically generated below the Carousel Container.

  2. Click the image component below the Carousel Container to modify the image information.

  3. For more carousel features, please use the carousel component.

We can implement more complex carousel scenarios using the Carousel Container, as shown in the figure below:

  1. 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.

  2. 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 colorindicatorActiveColorstring

Change the color of the anchor when selected

Example: "rgba(0, 0, 0, 0.9)"

Anchor colorindicatorColorstring

Change the color of the anchor in regular status

Example: "rgba(200, 200, 200, 0.9)"

Sliding animation durationdurationnumber

Change the sliding animation duration of the carousel during switching

Example: 500

Current slider indexcurrentnumber

Change the default display position of the carousel. 0 displays the first image by default, and so on.

Example: 0

transition slide(Mini Program)circularboolean

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 anchorindicatorDotsboolean

Enable/disable carousel anchor

Example: true

rendering mode(Mini Program)layoutTypestring

Rendering mode Mini program Skyline unique attributes

Example: "normal"

Specify animation type(Mini Program)transformTypestring

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)previousMarginstring

Margin before the current item, applicable to partially reveal the previous item, accepts px and rpx values

Example: "0px"

margin-bottom(Mini Program)nextMarginstring

back margin, applicable to partially reveal the next item, accepts px and rpx values

Example: "0px"

Easing animation type(Mini Program)easingFunctionstring

Specify swiper easing animation type

Example: "default"

Auto switch interval (ms)intervalnumber

Configure the carousel scroll time interval in ms

Example: 5000

vertical carouselverticalboolean

Once enabled, the carousel will change from scrolling horizontally to vertically.

Example: false

autoplayautoplayboolean

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)loopboolean

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
switchoverchangeobject
  • current: string当前轮播项所在的index
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.