Skip to main content

Slideshow

Slideshow Component

BRICKS TOOLS avatar
Written by BRICKS TOOLS
Updated over a week ago

  • Introduction

The Slideshow component allows users to display photos, videos, and streaming videos in a slide-based carousel format on display devices.

Basic slideshow mode includes both photos and videos.

  • Frame Block

The Frame attributes of the Slideshow component are the same as those of the Rect component. For details, refer to the Rect component’s Frame section.

  • Properties Block

The Properties of the Slideshow component inherit the basic properties of the Rect component. For details, see the Rect component’s Properties section.

Additional Properties

Property Name

Property Type

Description

Count Down

ms

milliseconds

The time interval of each slide. The default time is 2000 ms.

Set the display duration of each slide. Default is 2 seconds.

Paths

Array of String

Array of String

The media source of each slide. Each property is a slide. For example, Properties(0) means the first slide). The fields for each slide are:

  • url (required): the path to the media

  • mediaType (required): photo, video, video streaming

  • photoResizeMode: contain, cover, stretch, center, repeat

  • videoResizeMode: contain, cover, stretch

  • VideoAutoAspectRatio: whether auto aspect ratio will be applied to the streaming media

  • VideoAspectRatio: the aspect ratio of the streaming media: 4:3, 16:9, etc.

Set the media file for each slide. The media type can be specified as photo, video, or video-streaming, along with the media file path. The array fields for each slide include:

  • url (required): Path to the photo, video, or streaming source

  • mediaType (required): video, video-streaming, photo

  • photoResizeMode (optional): Display mode for the photo: contain, cover, stretch, center, repeat

  • videoResizeMode (optional): Display mode for the video: contain, cover, stretch

  • videoAutoAspectRatio (optional, Boolean): Whether to automatically apply aspect ratio for streaming videos

  • videoAspectRatio (optional): The aspect ratio of the streaming video, e.g., 4:3, 16:9

Loop

Boolean

Boolean (Yes/No)

To set whether the slideshow will be played on repeat.

Set whether the slideshow will loop.

Photo Resize Mode

One Of

List

The resize method of photo(s) on the slideshow list. Will be overwritten by the "photoResizeMode" method specified in Paths.

Set the display mode of photos in the Slideshow component. Options are the same as the Image component’s Resize Mode.

Video Resize Mode

One Of

List

The resize method of video(s) on the slideshow list. Will be overwritten by the "videoResizeMode" method specified in Paths.

Set the display mode of videos in the Slideshow component. Options are the same as the Video component’s Resize Mode.

Video Aspect Ratio

String

String

The aspect ratio of the streaming media: 4:3, 16:9, etc. Will be overwritten by the "videoAspectRatio" value specified in Paths.

Set the aspect ratio for Video Streaming, written in formats such as 4:3 or 16:9.

Fade Duration

ms

ms

The time duration of each slide fading in.

Set the fade-in duration for photos in each slide.

Blur Radius

Number

Number

The radius of the blur on each slide.

Set the blur radius applied to images in each slide.

  • Empty View Case Block

Property Name

Property Type

Description

Text

String

String

This line of text will be displayed when Paths (slideshow list) contains nothing.

設定當 Paths (slideshow 播放列表) 為空時，則顯示此文字。

Text Size

Number

Number

The font size of the empty view case text.

設定 Text 的文字大小

Text Color

String

String

The color of the empty view case text.

設定 Text 的文字顏色

Timeout

ms

ms

The time duration to wait until empty view case text show up.

設定當 Path 為空時，等待多少毫秒後顯示 emptyViewText

  • Properties – Border Block

The border attributes are the same as those of the Rect component. For details, refer to the Rect component’s Border section.

  • Animations Block

The animation event attributes are the same as those of the Rect component. For details, see the Rect component’s Animation section.

Additional Animation Events

Change Start

Animation that will be triggered when the slide is changed.

Triggered when the slideshow is about to switch to the next slide.

Change End

Animation that will be triggered when the slide is changed (will be triggered after the Change Start Animation).

Triggered after the Change Start animation (if specified) completes.

Content Change

Animation that will be triggered when the content in paths is changed.

Triggered when the Paths content changes.

Round End

Animation that will be triggered when all slides specified in paths are played.

Triggered when all slides specified in Paths have finished playing.

Media On Load

Animation that will be triggered when a slide is loaded.

Triggered when the next slide is successfully loaded.

  • Events Block

The event attributes are the same as those of the Rect component. For details, see the Rect component’s Event section.

Additional Events

Change Start

Event that will be triggered when the slide is changed.

Event triggered when the slideshow is about to switch to the next slide.

Change End

Event that will be triggered when the slide is changed (will be triggered after the Change Start Event).

Event triggered after the Change Start event and its animation (if any) complete.

Content Change

Event that will be triggered when the content in paths is changed.

Event triggered when the Paths content changes.

Round End

Event that will be triggered when all slides specified in paths are played.

Event triggered when all slides specified in Paths have finished playing.

Media On Load

Eventthat will be triggered when a slide is loaded.

Event triggered when the next slide is successfully loaded.

NEXT - Grid

Did this answer your question?