Screen: Slider

The manual how the screen with the slider operates

O
Written by Onboarding.Online Support Team
Updated over a week ago

Screen identification in the theme template

The screen containing the slider tool is presented with the Image centered in the screen together with the Title and the Subtitle parameters placed below. The screen obtains the corresponding title "Slider" to be differentiated accordingly among other screens in the theme template.

The default design of the screen with the slider consists of the following features:

  1. No Navigation Bar or Footer buttons are depicted in the screen.

  2. The screen obtains animation

  3. The slider tool is embedded

  4. The number of slides to add is unlimited

  5. Each slide should be set up separately in time, images, and title (and subtitles) depending on the slider type selected

  6. The screen contains the Image, Title, and Subtitle parameters installed not separately but inside the slider tool

List of parameters presented in Screen: Slider

  • Background

  • Basic Configuration

  • Slider

📢 Please note that all parameters can be customized and switched off or on depending on your app design.

Here, you may see where these parameters are displayed in the screen precisely.

Screen peculiarities and functions

Understanding the Slider tool structure

  1. Slider Type

  2. Slider Box padding settings

  3. Slider timer for the whole animation in the screen, for all slides in total

  4. Slider Preview

  5. "Adding slides to the screen" button

  6. Slide number to customize

  7. Image settings for the corresponding slide number

  8. Title settings for the corresponding slide number

  9. Slide timer: for each slide separately, depicting its appearance number in sequence and duration time

Choosing the Slider Type

This Slider design can be customized differently as well by installing the needed format as presented in the list below:

⚠️ Customization is possible only within the slider types presented on the drop-down menu.

Please see the default design of all these slider types:

Image

Slider Type settings

In this design, you may easily add the image operating in several ways:

  1. You should insert the needed Image URL or choose one from the assets.

  2. You may upload an image or photo from your device by clicking the Camera sign.

  3. You can generate the image with the AI Generator in the settings

📢 Just remember to specify as precise description for the needed image as possible.

📢 Image AI Generator offers 12 images for selection at once. Note that you may re-generate them if none suitable is found.

ImageTitle

Slider Type settings

The Title parameter contains the Text settings, allowing you to adjust the text font, size, color, and alignment in the screen regarding the screen borders.

ImageTitleSubtitle1

Slider Type settings

The Subtitle parameter also contains the text settings that totally coincide in the tool kit with the Title parameter.

ImageTitleSubtitle1Subtitle2

Slider Type settings

📢 These settings are attributed to only one slide with the corresponding number. Each slide contains its own fields for filling out with the embedded settings.

Each slider type contains settings for the slider box padding, allowing you to control the distance between the slider box itself and the screen borders.

Setting the Total Timer for the Slider

The timer determines the total duration when the Slider screen is displayed during onboarding. Once the timer finishes, users are automatically redirected forward based on predefined connections.

Customizing Display Duration for Each Slide

Each slider item has a duration setting that determines how long it will be displayed. The duration is adjusted so that the total duration always equals 100%, divided equally among all items, or slides to be precise:

  • Set the percentage of time each slide will be displayed.

  • For example, if the total duration is 10 seconds and a slide is set to 50%, it will be displayed for 5 seconds.

⚠️ Deleting an item automatically recalculates the duration for the remaining items.

⚠️ When adding a new item to a slider, the new item inherits the settings of the first item.

Did this answer your question?