Kuika's Marquee element allows you to scroll your content horizontally. It offers a dynamic visualization, helping you highlight important information and grab users' attention. By moving content horizontally, you can create an effective look for announcements, campaigns or featured content. Marquee is especially ideal for creating attention-grabbing messages and information areas. In this tutorial, you will learn how to use the Marquee element, how to adjust scroll settings, and how to customize your content.

This training content consists of the following topics:

Adding a Marquee element,
Marquee element properties,
Authorization,
Visibility,
Editability,
Customize the interface design with Style Panel.

Add Marquee Element

After logging in to the Kuika platform, open the project you will work on from the “Apps” screen.

In the “UI Design” (1) module, drag and drop the Marquee element (4) under the “Data” (3) category from the “Elements” (2) panel on the left side.

The Marquee element can be used together with the Flex Grid element. While the Flex Grid that you will add inside the Marquee element provides editing, you can also create a visual and written floating structure with the Image and Label elements you will add inside.

If data is to be linked, this can be done via the Datasources property in the Properties panel of the Flex Grid element.

Marquee Element Properties

Located in the Properties panel:

Speed: It allows you to determine the sliding speed of the data you add in the element.
Auto Fill: It allows the data you add to come in the element regularly and without spaces.
Pause On Hover: Allows the scrolling to stop when the cursor hovers over the element.
Pause On Click: Allows the scrolling to stop when the element is clicked on with the cursor.
Gradient Color: Allows you to specify the shadow structure that will be shown from the edges of the element.
Gradient Width: Allows you to determine the thickness of the shadow structure that will be shown from the edges of the element.

Editability

Allows you to make elements editable.

Enabled: Selecting this option makes the element editable.
Disabled: In this case, the element cannot be edited.
Sometimes Enabled: This option means that the element is sometimes editable and sometimes not, depending on certain conditions.