Carousel

Element type: Dictionary

The carousel component is a user interface element that allows the display of multiple images or other content items in a single, interactive container. It is commonly used to showcase a series of images or content in a visually appealing and space-efficient manner.

warning

Need macOS 14 Sonoma and above.
Carousel only supports Image, Video and Text components at the moment.

Keys

Name	Type	Possible values	Required
Type	String	Carousel	Required
Height	Number	-
CornerRadius	Number	-
AlwaysShowNavigationButtons	Boolean	-
AlwaysShowPageIndicators	Boolean	-
DefaultIndex	Number	-
ScrollDelay	Number	-
Components	Array (Components)	-

Detail

Type Required

Type: String
Explanation: The type of the component which has to be Carousel.

Height

Type: Number
Default: 300
Explanation: The Carousel component's height, while the width is constrained to the available space within the Slide.

CornerRadius

Type: Number
Default: 30
Explanation: The corner radius of the cards within the carousel.

AlwaysShowNavigationButtons

Type: Boolean
Default: true
Explanation: The key ensures the navigation buttons (arrows) are always visible within the carousel component, providing users with consistent and convenient access to navigate through the content.

AlwaysShowPageIndicators

Type: Boolean
Default: true
Explanation: The key is a feature that ensures the page indicators (dots) are always visible within the carousel component, providing users with continuous visual cues about the number of items and their position within the carousel.

note

Since Octory 3.1.0, AlwaysShowNavigationButtons and AlwaysShowPageIndicators take effect as soon as the slide is displayed. They used to only apply after the end user had moved the pointer over the carousel once.

The navigation buttons and the page indicators are also reachable with the keyboard and announced by VoiceOver.

DefaultIndex

Type: Number
Default: 0
Explanation: DefaultIndex is a key that allows the specification of a default starting index for the carousel component, ensuring that a specific item is initially displayed when the carousel is loaded.

ScrollDelay

Type: Number
Explanation: This key is an optional feature that allows for the specification of a delay between each scroll transition within the carousel component. When used, this feature introduces a pause between the automatic scrolling of items, providing users with a more controlled and leisurely browsing experience. If not used, the carousel will not transition between items automatically.

Components

Type: Array (Components)
Explanation: An array that allows the inclusion of multiple items, such as images, videos, or text, within the carousel component.

Condition PRO

Type: Dictionary (Condition)
Explanation: Allows to hide or show the component using a boolean expression.

Example

The following several components in the carousel.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<!-- ... -->
	<key>Slides</key>
	<array>
		<dict>
			<key>Containers</key>
			<array>
				<dict>
					<key>Components</key>
					<array>
						<dict>
							<key>Type</key>
							<string>Carousel</string>
							<key>Height</key>
							<integer>280</integer>
							<key>CornerRadius</key>
							<integer>30</integer>
							<key>AlwaysShowNavigationButtons</key>
							<false/>
							<key>AlwaysShowPageIndicators</key>
							<false/>
							<key>DefaultIndex</key>
							<integer>0</integer>
							<key>Components</key>
							<array>
								<dict>
									<key>HideControls</key>
									<false/>
									<key>Repeat</key>
									<true/>
									<key>ShouldFillSpace</key>
									<true/>
									<key>IsMuted</key>
									<true/>
									<key>AutomaticStart</key>
									<true/>
									<key>Type</key>
									<string>Video</string>
									<key>URL</key>
									<string>https://www.apple.com/105/media/us/mac/family/2024/60fc0159-4236-4a03-8534-f5ba07e538c5/anim/welcome/xlarge_2x.mp4</string>
								</dict>
								<dict>
									<key>Type</key>
									<string>Image</string>
									<key>URL</key>
									<string>https://www.apple.com/v/macbook-pro/ak/images/overview/highlights/highlights_space_black_fallback__cflt2w4vou02_large_2x.jpg</string>
									<key>ShouldFillSpace</key>
									<true/>
								</dict>
								<dict>
									<key>Type</key>
									<string>Text</string>
									<key>Text</key>
									<string>Hello ${USER_FULL_NAME} !</string>
									<key>TextFontConfiguration</key>
									<dict>
										<key>Style</key>
										<string>Title</string>
										<key>TextAlignment</key>
										<string>Center</string>
									</dict>
								</dict>
								<dict>
									<key>Type</key>
									<string>Image</string>
									<key>URL</key>
									<string>https://www.apple.com/ac/ac-video-posterframe/4.0/images/ac_video_poster_960x540_2x.jpg</string>
									<key>ShouldFillSpace</key>
									<true/>
								</dict>
							</array>
						</dict>
					</array>
				</dict>
			</array>
		</dict>
	</array>
	<!-- ... -->
</dict>
</plist>