Sliding Image Widget
This widget belongs to the Basic category in the widget library. It enables you to insert a slideshow showing a series of slides, each of them displaying an image.
- A set of properties is used to configure the behavior of the slideshow in execute mode, e.g. auto advance, navigation display mode, etc.
Notes
See General remarks on widgets.
- The order in the Slides Image list defines the order in which slides are displayed in the slideshow.
Caution
- If you disable the auto advance function of the slideshow (Timer option), you should display the Previous
and Next 
arrows (Navigation Arrows option). If you do not do so, users will not be able to view the slideshow.
Best practice
- To insert text, images, HTML pages or pages from another app in the slideshow, you should use the Sliding Panel widget which opens the text editor.
- To insert only pages from another app in the slideshow, you should use the Sliding Page widget.
Example
You want to display a slideshow containing three images
List of properties
Content
Slides Image: List of images included in the slideshow. Click [ ADD ITEM ] to add a new one. See the procedure.
: Used to modify the order of slides in the slideshow.
: Used to open the icon gallery in order to select an image for the slideshow from the local server or from the Internet. - Once you have selected an icon, its thumbnail will appear (2).
- To delete the associated image, open the icon gallery and click [ CLEAR ICON ].
: Used to delete a slide from the slideshow.
: Used to customize the slide display using different properties applicable to the image. Click to show the drop-down list.
BackgroundImageProperties
Repeat: Used to define the way in which the image is repeated in the background.
| no-repeat | repeat | repeat-x | repeat-y |
|---|---|---|---|
|
Image not repeated
|
Image repeated horizontally and vertically
|
Image repeated horizontally
|
Image repeated vertically
|
|
The image is repeated as many times as required to cover the entire background. The last image is cropped if required. |
|||
Size: Used to define the size of the image.
| Initial size | Scale to fit | Scale to cover |
|---|---|---|
|
Original size
|
Image adjusted to fit the height of the background while locking its aspect ratio
|
Image resized to fit the the height and width of the entire background. Note: A part of the image may be cropped.
|
Position (H/V): Used to define the position of the image in the background.
- The first value defines the horizontal position of the image as regards the left, right or center.
- The second value defines the vertical position of the image as regards the top, bottom or center.
- If the image is repeated in the background (i.e. Repeat = repeat), then Position will have an impact on the layout of the repeated image.
Setup
Animation: Used to define the transition effects between slides in the slideshow. You can apply a Fade effect or no transition effect, i.e. Slide.
Timer Speed: This is the speed, in milliseconds, at which slides in the slideshow will advance. This defines the amount of time each slide will be displayed.
Pause On Hover: Used to define if the slideshow will automatically pause when the cursor is hovering over it (box is checked) or not (box is not checked).
Resume On Mouseout: Used to define if the slideshow will automatically resume when the cursor is no longer hovering over it (box is checked) or not (box is not checked).
Next On Click: Used to indicate if the slides in the slideshow will advance when users click the slideshow, regardless of whether the duration defined in Timer Speed has ended (box is checked) or not (box is not checked).
Animation Speed (Note: To be defined when the transition effect is Fade): Time, in milliseconds, required by the system to display each slide completely.
Stack on Small: Used to indicate if slides are stacked on top of each other in a static way (box is checked) or if they advance horizontally (box is not checked). You should use this option for displaying slideshows on devices with low screen resolutions (e.g. smartphone). Note: This option is taken into consideration for devices whose height is less than or equal to 40 em (the em unit refers to the font size).
| Box is checked | Box is not checked |
|---|---|
 |
 |
Navigation Arrows: Used to indicate if the Previous and Next arrows are displayed by the side of the slideshow (box is checked) or hidden (box is not checked).
| Box is checked | Box is not checked |
|---|---|
 |
 |
Slide Number: Used to show if the slide number is visible (box is checked) or hidden (box is not checked). Note: The order number of the slide appears at the top left of the slideshow followed by the total number of slides. If the order of the slides in the slideshow is modified, then the order number of each slide will automatically be modified.
Slide Number Text: Text displayed between the order number of the current slide and the total number of slides.
Slide Number Text: of ==> text displayed in the slideshow for slide 2: 2 of 3
Bullets: Used to indicate if bullets 
are displayed at the bottom of the slideshow (box is checked) or not (box is not checked). Each bullet displayed represents one slide and can be used to access it directly.
| Box is checked | Box is not checked |
|---|---|
 |
 |
Circular: Used to indicate if the slideshow will loop continuously (box is checked) or stop after the last slide (box is not checked).
Timer: Used to define if the slideshow can run in automatic mode (box is checked) or not (box is not checked). Note: When the timer is enabled, the progress bar indicating the remaining time of the slide and the Pause 
and Resume 
buttons are displayed at the top right of the slideshow.
Color Of The UI Elements: Color of navigation bullets for inactive images.
Color Of The UI Elements (active): Color of the navigation bullet for the active image and color of the Previous /Next arrows.
Theme
See the description of properties.
Procedure: How to create a slideshow
1. Click [ ADD ITEM ]. Click 
to select the image you want.
2. Repeat this procedure for the other images in the slideshow in the order in which you want to display the slides.
- To change the order in the Slides Image list, click and drag the slide you want to its new position using .
- To delete a slide, click .
3. Define the slideshow settings in the Setup section.
4. Switch to execute mode 
to view the slideshow as it will appear to users.