Skip to main content

Creating a Slider Block

The Slider block is a full-fledged slider editor for the main page or any other screen. It supports a tree structure of slides with nesting, drag-and-drop functionality, and individual display time settings for each slide.

ℹ️Legacy SliderEditMainPage

The old screen SliderEditMainPage.js has been removed — it can no longer be opened. All slider settings are now only available in the new editor.

1. Creating a Block​

In the Name field, enter the title, in the "Type" field select "Slider," and specify the

Marker
.

2. Slider Settings — Global Settings​

On the Slider settings screen, general slider parameters are available:

  • time — the display time for each slide.
  • timeInterval — the unit of measurement: seconds or milliseconds.

These settings apply to all slides that do not have an individual display time set.

3. List of Slides​

The list of slides is displayed as a tree table (via the common component JsonToHtmlTable). Drag-and-drop is supported:

  • You can drag a slide between parents (nesting one slide within another).
  • You can change the order of slides within the same level.

Each slide is represented by a SlideCard, which shows:

  • A preview of the image and text.
  • A visibility toggle (show/hide).
  • An icon for display time (with a link to the settings modal).
  • A delete button.

4. Display Time for an Individual Slide​

For each slide, you can set an independent display time that differs from the global settings. Click on the time icon in the slide card — the SlideTimeSettingsModal will open:

  • Units of measurement: sec / min / hour.
  • Pair validation of fields (conflicting values cannot be set simultaneously).

If no individual time is set for a slide, the global time from Slider settings is used.

5. Editing a Slide (SlideEditPage)​

Clicking on a slide opens the SlideEditPage — a separate editing page with:

  • Breadcrumbs — navigation through the levels of the slider's nesting.
  • Attribute set selector — selection of a set of attributes that applies to this slide.
  • Nested child slides — a slide can have its own child slides, forming subgroups.