Image Slider widget
  • 22 Oct 2024
  • 1 Minute to read

Image Slider widget


Article summary

This widget shows an image slideshow with up to 30 images. You can navigate between the individual images by swiping or clicking on the navigation arrows. Additionally, clickable bullets indicate the image's position in the slideshow. The spot dynamically adapts to the resolution of your screen.

System requirements

This widget requires IXM Platform version 11.0 or later.

Configure the spot

In the HTML Wizard, you can see all configurable spot elements in the tree structure of the spot. Changes are immediately visible in the spot preview.

You can also include HTML Wizard spots as widgets in the HTML Composer, or configure them in the Composer to use them independently.

Configure the following elements of the spot as desired:

Element

Description

Spot

Spot duration

Specify the duration of the spot in the format: hh:mm:ss

The spot is reloaded at the end of the duration.

If you enter 00:00:00, the spot plays continuously.

Background

Select to set a background color of the spot.

Click in the color selection box to select a color.

Media list

Add images to display in the slideshow.

You can add up to 30 images and change their order using the arrows.

Config

Enable bullets

Select to enable navigation bullets that indicate the position of the image in the slideshow.

You can jump to the corresponding image by clicking on the bullet. 

If the slideshow contains less than two images, no bullets are displayed.

Bullet color

Select a color for the bullets.

Bullet size

Specify the size of the bullets in pixels.  

Bullet opacity

Specify the opacity of the bullets.

1 is opaque.

Enables arrows

Select to enable arrows to navigate between images.

If the slideshow contains less than two images, no arrows are displayed. 

Arrow color

Select a color for the arrows.

Arrow size

Specify the size of the arrows in pixels.  

Arrow opacity

Specify the opacity of the arrows.

1 is opaque.

Enable swipe

Select to enable swiping to navigate between images.

Image scaling

Select how to scale the images to adapt them to the screen resolution:

  • Inside (Letterbox): images are completely visible and the aspect ratio is maintained. If the image is wider or taller than the screen, it’s centered. 

  • Outside (Pan-Scan): images fill the screen and the aspect ratio is maintained. If the image is wider or taller than the screen, only a section of the image is displayed. 

Slide display time (in seconds)

Specify how long each image is displayed in seconds. 

If you set the display time to 0, there will be no automatic switch to the next image.


What's Next
Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.