Features WiFi Marketing

Splash Page Image Slider

The image slider is a dynamic visual element that automatically or manually cycles through a series of high-quality images (or sometimes text overlays with calls-to-action).

Images slide from one to the next — with autoplay, navigation arrows, dots, or swipe support on mobile.

Prerequisites: You must already be in edit mode with your splash page. (See Finding and Editing Your Splash Page.)

Each slide can include:

  • Eye-catching photos
  • Product shots
  • Lifestyle imagery
  • Branded graphics
  • Short promotional text or CTAs

How an Image Slider Benefits You as a Marketing Tool

When used thoughtfully, an image slider can be a strong visual marketing asset on a splash page. Here are the main advantages:

  • Creates a premium, dynamic first impression — Multiple high-quality images make the splash page feel modern and professional instead of static.
  • Tells multiple stories in one space — You can showcase different aspects of your brand, products, offers, or customer experiences without cluttering the page (e.g., one slide for a product, another for a promotion, another for testimonials).
  • Increases visual engagement — Movement naturally draws the eye and can hold attention longer than a single static image, especially when paired with subtle animations or transitions.
  • Provides valuable promotional real estate — Each slide can highlight a different marketing message, special offer, event, or benefit while keeping the design clean.
  • Supports storytelling & branding — Great for lifestyle brands, e-commerce, events, or services — you can rotate through seasonal promotions, before/after shots, or customer-focused imagery.
  • Mobile-friendly when optimized — Modern sliders adapt well to different screen sizes and can include touch/swipe navigation.

Important Caveats

Many studies show that traditional auto-rotating sliders on homepages have very low click-through rates (often under 1–2%, with most people only noticing the first slide). They can sometimes hurt conversions if overused or poorly designed (due to banner blindness or slower load times).

Best practices for maximum benefit:

  • Keep it simple: 3–5 high-quality slides max.
  • Use slow, subtle transitions and autoplay with pause on hover.
  • Add clear, compelling text overlays and strong CTAs on each slide.
  • Optimize images for fast loading (compress them heavily).
  • Consider making one strong static image the default and using the slider as an enhancement.

In the context of the Multi-Step Marketing widget, the Image Slider (along with Background Video, Background Slider, and Interstitial Video) gives you flexible, visually rich ways to make your splash page more engaging and promotional without needing complex custom code.

Configuring the Image Slider Widget

1. From the Elements panel on the left of the screen, click Splash Elements to expand this section. Scroll down to locate the Slider and drag it to your splash page. Hover over the widget until you see the context menu and click Edit.

Placing the widget in a column to the left or right of the form produces images that are smaller than the form. Placing the widget above or below the form produces larger images.

2. You can add up to five images to the slider. To add an image, click Choose. If the image is already in your Media Library then click your desired image and click Select Image. You can add an (optional) caption to this image,

If the image is not in your Media Library, then click the Upload files tab and follow the instructions for adding the image to your Media Library. Once that is done, then proceed as described at the beginning of this step.

IMPORTANT: Do not use an image URL from another website domain, by clicking From URL, as this may cause issues with the splash page loading. If you do need to use external images, be sure to add those domains to your Walled Garden Settings on your network.

3. Transition Speed - This is the transition speed of the images expressed in milliseconds between 50 - 1000.

4. Slide Duration - This setting controls how long an image is displayed before transitioning to the next image. The duration is expressed in seconds between 1 - 10.

5. Autoplay Slides - Enabling this setting means the images will begin the transitioning as soon as the splash page is displayed to the guest. Leaving this setting disabled give your guest control on when to transition to the next image.

6. Pager - Enabling this setting puts a dot below each image allowing your guests to move between images as they wish by clicking the dot. If Autoplay Slides is enabled, transition continue from the image selected by your guest.

7. Pager Color - Sets whether the dots beneath your images are dark or while.

8. Navigation - As well as enabling Pager for navigation, this setting uses a left and right arrow to allow your guests to move between images as they wish. If Autoplay Slides is enabled, transition continue from the image selected by your guest.

9. Pause On Hover - You can pause the transition of images when a guest hovers over an image if Autoplay Slides is enabled. Transition continues once the guest is no longer hovering over the image.

10. Pause On Controls Hover - You can pause the transition of images when a guest hovers over the left and right arrow (if Navigation is enabled) or the dots beneath the images (if Pager is enabled) if Autoplay Slides is enabled. Transition continues once the guest is no longer hovering over the either set of controls.

11. Click Publish Changes. Your newly customized splash page is now live.

Example

Image Slider Example

Animations

You can customize how the Image Slider is first presented to your guests. You have seven choices:
• None - The images appears instantly when the splash page is displayed
• Slide Upwards or Slide Downwards
• Slide to the Left or Slide to the Right
• Zoom In or Zoom Out

You can set the Animation Duration for a maximum of 6 seconds. You can delay the animation for up to a maximum of 20 seconds. Setting the Animation Delay may override any of the above Entrance Animation choices other than None.

Miscellaneous uses custom CSS styling and falls outside the scope of this knowledge base article. For guidance on advanced customization, we recommend reaching out to your design team or contacting our support team directly.

See also:

← Back to Help Centre