Components/Data display

ECarousel Carousel

import EUI 1.0

Examples

Card carousel, hover pause and named slides

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { spacing: 12 width: parent.width ECarousel { id: carousel height: 220 type: "card" arrow: "hover" trigger: "hover" pauseOnHover: true width: Math.min(600, parent.width) delegate: EClip { id: slide readonly property var slideData: parent.modelData radius: 8 Image { anchors.fill: parent source: slide.slideData.source fillMode: Image.PreserveAspectCrop } EText { padding: 12 color: "white" font.pixelSize: 24 style: Text.Outline styleColor: "#80000000" text: slide.slideData.title anchors.bottom: parent.bottom } } model: [{ name: "design", title: qsTr("Design system"), source: "qrc:/example/images/gallery/lake.jpg" }, { name: "build", title: qsTr("Component engineering"), source: "qrc:/example/images/gallery/neon-red.jpg" }, { name: "ship", title: qsTr("Product delivery"), source: "qrc:/example/images/gallery/neon-purple.jpg" }] } EButton { text: qsTr("Open component engineering") onClicked: carousel.setActiveItem("build") } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Carousel

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ECarousel { height: 220 width: parent.width model: ["qrc:/example/images/gallery/lake.jpg", "qrc:/example/images/gallery/neon-red.jpg", "qrc:/example/images/gallery/neon-purple.jpg"] delegate: Image { source: parent.modelData fillMode: Image.PreserveAspectCrop } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Properties

PropertyDescriptionValues and default

arrowstring

Visibility policy for the carousel arrows.

"always" / "hover"
"never"

Default"always"

autoplaybool

Advance carousel items automatically.

Defaulttrue

cardScalereal

Scale of inactive cards in card-style carousels.

Effective value is clamped to 0.1–1

Default0.83

currentIndexalias

Index of the current selected or displayed item.

-1: no selection
0 and above: item index

DefaultAlias: slides.currentIndex

delegateComponent

Carousel content delegate exposing index and modelData.

DefaultdefaultSlide

directionstring

Component layout direction.

"horizontal" / "vertical"

Default"horizontal"

enabledbool

Allow interaction; false disables the control.

Defaulttrue

heightreal

Component size in pixels; may be bound to its parent layout.

DefaultimplicitHeight

indicatorPositionstring

Position of the carousel indicators.

"inside" / "outside"
"none"

Default"inside"

initialIndexint

Initially displayed item index, starting at 0.

Default0

interactivebool

Allow mouse and keyboard interaction with the carousel.

Defaulttrue

intervalint

Carousel auto-advance interval in milliseconds.

Default3000

loopbool

Wrap carousel navigation between its first and last items.

Defaulttrue

modelvar

Array of image URLs or carousel item objects.

Fields:
name, label, source

Default[]

motionBlurbool

Enable motion blur during carousel transitions.

Defaultfalse

pauseOnHoverbool

Pause auto-advance or the close timer while hovered.

Defaulttrue

triggerstring

Interaction that activates the action.

"click" / "hover"

Default"click"

typestring

Presentation style of the carousel items.

"default" / "card"

Default"default"

visiblebool

Whether the component is visible.

Defaulttrue

widthreal

Component size in pixels; may be bound to its parent layout.

DefaultimplicitWidth

countintRead only

Skeleton instance count or current item count, depending on the component.

DefaultComputed at runtime

hasLabelsboolRead only

Whether carousel data provides indicator labels.

DefaultComputed at runtime

Signals

SignaturePurpose

changed(int index)

Emitted when the active slide changes; index is the new slide index.

indexChanged(int index, int previousIndex)

Emitted when slides change; index is the new index and previousIndex is the old index.

Methods

SignaturePurpose

next()

Move to the next item or step.

previous()

Move to the previous item or step.

setActiveItem(value)

Activate the item specified by value or index.

setCurrentIndex(index)

Switch to the carousel slide at index.