- 22 Oct 2024
- 1 Minute to read
- Print
Image Slider widget
- Updated on 22 Oct 2024
- 1 Minute to read
- Print
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:
|
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. |