Skip to main content

Slide Show Component

Add a button that will allow a presentation to automatically advance through slides in a infinite loop

Will Matysik avatar
Written by Will Matysik
Updated over 2 weeks ago

Note: The Slide Show component can be added in any version of Layout Manager

Step 1: Add the Slide Show Component
Begin by accessing the Component Store, search for “Slide Show”, and add it to your slide.

Step 2: Size and Position
Click and drag the component, size it as desired, then place it anywhere on your slide layout.

Proper sizing ensures that the desired text fit cleanly within your overall design.

Note: If you want the button to appear on every slide you will want to add the Slide Show component to the Deck layer group

Step 3: Edit the component Settings
Use the component settings panel to; change the Slide Show component's button text , hide the button text, add a button graphic, set if the button should be manually clicked to start the slide show or if it should start automatically, and the duration that each slide will be visible before automatically advancing to the next slide.


​​There are several options within the component Settings:

Start Slide Show Label - This is an editable text field setting that will allow you to edit the text that is shown on the button when the Slide Show is paused.

Pause Slide Show Label - This is an editable text field setting that will allow you to edit the text that is shown on the button when the Slide Show is running.

Hide Labels - This is a checkbox setting, where if checked will disable the button labels and remove the Start Slide Show Label and Pause Slide Show Label editable text field.

Note: If you choose to Hide Labels it is recommended that use the Include Graphics setting to add an image or icon.

Start Slideshow Automatically - This is a toggle setting (Manual or Automatic) that will allow you to set if the presentation start the Slide Show automatically when the presentation loads, or if the Slide Show button will need to be manually clicked to start the Slide Show.

Slide Duration - This is an editable numeric text field that will set the duration (in seconds) you wish to keep each slide visible before advancing to the next slide.

Include Graphics - Is a dropdown selector setting that will allow you to choose between not having any graphic (None), using an Image (Image) or using an Icon (Icon) shown for the Slide Show component button.

  • If Icon setting is chosen additional settings will become visible:
    ​Start Icon - This setting will allow you to choose an icon from the Icon library to be shown on the button when the Slide Show is paused.
    ​Pause Icon - This setting will allow you to choose an icon from the Icon library to be shown on the button when the Slide Show is running.
    ​

  • If Image setting is chosen additional settings will become visible:
    ​Start Image - This setting will allow you to choose an image from the Images library to be shown on the button when the Slide Show is paused.
    ​Pause Image - This setting will allow you to choose an image from the Images library to be shown on the button when the Slide Show is running.
    ​Hover Start Image - This setting will allow you to choose an image from the Images library to be shown on the button when it is hovered over and the Slide Show is paused.
    ​Hover Pause Image - This setting will allow you to choose an image from the Images library to be shown on the button when it is hovered over and the Slide Show is running.
    ​

  • Position - Is a dropdown selector setting that will allow you to choose the position of the graphic in relation to the Start Slide Show Label and Pause Slide Show Label text; options are Top, Left, Bottom, or Right.
    ​

  • Gap - This is an editable numeric text field that will set the size of the space in between the Graphic (Image or Icon) and the Start Slide Show Label and Pause Slide Show Label text.
    ​

Note: You can use both Labels and Include Graphics setting to show text and image on the Slide Show component button.

Step 4: Edit the component Styling
Use the Styling tab to style the the component.

Note: Styling options available will depend upon Settings used.


​Start Slideshow Container:
(styling options ALWAYS present)

  • Background Color

  • Border

  • Border Radius

  • Padding

  • Drop Shadow
    ​

Hover Start Slideshow Container:
(styling options ALWAYS present)

  • Background Color

  • Border

  • Border Radius

  • Padding

  • Drop Shadow
    ​

Pause Slideshow Container:
(styling options ALWAYS present)

  • Background Color

  • Border

  • Border Radius

  • Padding

  • Drop Shadow
    ​

Hover Pause Slideshow Container:
(styling options ALWAYS present)

  • Background Color

  • Border

  • Border Radius

  • Padding

  • Drop Shadow

Start Slideshow Label:
(styling options ONLY present if Hide Labels setting check box is left un-checked)

  • Font Size

  • Font Family

  • Text Decoration

  • Text Transform

  • Text Color

  • Hover Text Color
    ​

Pause Slideshow Label:
(styling options ONLY present if Hide Labels setting check box is left un-checked)

  • Font Size

  • Font Family

  • Text Decoration

  • Text Transform

  • Text Color

  • Hover Text Color
    ​

Pause Slideshow Label:
(styling options ONLY present if the Icon option is selected within the Include Graphic setting)

  • Start Icon Color

  • Hover Start Icon Color

  • Pause Icon Color

  • Hover Pause Icon Color

Did this answer your question?