Hero Slider

Object Preview

❮ ❯

The Hero Slider object provides a dynamic, auto-playing carousel for displaying a sequence of images or looping videos. It is an incredibly effective way to present multiple pieces of featured content within a confined space on your Custom Launcher.

Because each slide can act as a clickable hyperlink or trigger logic events, the Hero Slider often serves as the central focal point of a modern game launcher design.

Typical Uses

• ❖ Showcasing the latest store items or microtransactions
• ❖ Cycling through community screenshots of the week
• ❖ Creating an interactive "What's New" newsfeed panel
• ❖ Displaying promotional banners for upcoming events

Default Settings

When placed onto your layout, the Hero Slider initializes with two placeholder slides and a smooth sliding transition.

Properties

The visual editor allows you to manage the individual slides and control the overarching behavior of the carousel.

Slides Management

The core of the Hero Slider is its slide list. For each slide, you can configure:

• Media Type: Choose whether the slide displays an Image or a looping Video.
• Fit: Control how the media scales (Cover, Contain, or Fill).
• Media URL: The direct link to your asset. You can use the built-in Asset Library to select files.
• Link URL (Optional): A web address that will open in the default browser when the user clicks the slide.

Settings & Controls

• Duration: How long each slide remains on screen before automatically progressing (in milliseconds).
• Transition: Choose between a horizontal "Slide" effect or a smooth "Fade" effect.
• Show Arrows / Show Dots: Toggle the visibility of the left/right navigation arrows and the pagination dots at the bottom.

Appearance

• Corner Radius: Round off the edges of the entire slider container.
• Border Settings: Apply a solid border around the slider by defining its thickness and color.

Hero Slider Events

You can build custom interactions by attaching logic to the slider's events.

onSlideChange

This event is triggered every time the slider moves to a new slide, regardless of whether it moved automatically or because the user clicked a navigation button. This is ideal for synchronizing background colors or playing a subtle sound effect as the content updates.

onSlideClick

Fires when the user clicks directly on the active slide image/video. While you can configure a simple Link URL in the slide properties, using this event allows you to trigger complex actions instead—such as navigating to a different launcher page or launching a specific game module.

All Possible Actions

Like all visual objects, the Hero Slider responds to the standard layout actions.

Building Logic with the Hero Slider

Here is an example of utilizing the Hero Slider as an interactive element.

Custom CSS Example

For Developer Edition users, you can use Custom CSS to restyle the navigation arrows and dots to match your launcher's theme perfectly. In this example, we've updated the slider geometry to a wide cinematic aspect ratio and turned the arrows into glowing blue orbs.

Custom CSS Live Preview

❮ ❯

/* Developer Edition Custom CSS Example for Hero Slider */
/* Target the navigation arrows */
.hero-arrow {
 width: 40px !important;
 height: 40px !important;
 border-radius: 50% !important; /* Make them perfect circles */
 background: #1e3a8a !important; /* Dark blue background */
 border: 2px solid #3b82f6 !important;
 color: #fff !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 box-shadow: 0 0 15px rgba(59,130,246,0.4) !important;
 transition: all 0.3s ease !important;
 padding: 0 !important;
}
/* Add a bright hover effect to the arrows */
.hero-arrow:hover {
 background: #3b82f6 !important;
 box-shadow: 0 0 25px rgba(59,130,246,0.8) !important;
 /* Maintain the Y-axis centering while scaling up */
 transform: translateY(-50%) scale(1.1) !important; 
}
/* Target the pagination dots */
.hero-dot {
 width: 10px !important;
 height: 10px !important;
 background: #1e3a8a !important;
 border: 1px solid #3b82f6 !important;
 border-radius: 2px !important; /* Change circles to squares */
 margin: 0 6px !important;
 transition: all 0.3s ease !important;
}
/* Style the active dot and hover state */
.hero-dot:hover,
.hero-dot.active {
 background: #3b82f6 !important;
 transform: scale(1.2) !important;
 box-shadow: 0 0 10px rgba(59,130,246,0.8) !important;
}

Summary

The Hero Slider acts as a powerful billboard within your Custom Game Launcher. By utilizing its ability to mix images and videos, and wiring its slide events to navigation actions, you can create a highly engaging hub that naturally directs users to your most important content.