This type of widget belongs to the Basic category in the widget library. It enables you to insert a slideshow showing a series of slides, each of which can call an app page. 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.

• You can only browse through the pages of the app. You cannot insert a page from another app or a HTML page in the slideshow.
• The order in the Slides Page 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 images, HTML pages or pages from another app in the slideshow, you should use the Sliding Panel widget.
• To insert only images in the slideshow, you should use the Sliding Image widget.

Example

You want to display a slideshow with three app pages that show the weather forecast for three cities: New York, Paris and Moscow
         

List of properties

Content

Slides Page: List of slides included in the slideshow. Click [ ADD PAGE ] to add a new one. Note: The list contains all app pages that are not included in the slideshow.  See the procedure.

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 PAGE ]. Select the page corresponding to the first slide of the slideshow from the Slides Page drop-down list.

2. Repeat this procedure for the other slides in the order in which you want to display them.

• To change the order in which the slides are displayed, click and drag the slide you want to its new position using .
• To delete a slide, click .
• Click  to modify the content of a page. It will automatically be displayed in the Design pane.

3. Define the slideshow settings in the Setup section.

4. Switch to execute mode  to view the slideshow as it will appear to users.