Mobile Slideshow Shortcode

Updated on January 11, 2018

Mobile Slideshow is one of the shortcodes available in The Ken theme which you can take advantage of. It will help you to display your beautiful images on a mobile device mockup. To see the Mobile slideshow shortcode in action, you may check the demo page.

Ken Mobile Slideshow Demo 1-mobile slideshow shortcode

In this article, we will explain displaying and configuring Mobile Slideshow shortcode.


Displaying Mobile Slideshow Shortcode

To add Mobile Slideshow shortcode:

1Add or edit an existing page or post.
2In Visual Composer section, Click + button.

mobile slideshow shortcode

3In Add Element pop-up screen, search for Mobile Slideshow and click on it to be added to the page.

mobile slideshow shortcode

4When the shortcode is added, a new pop-up screen called Mobile Slideshow Settings opens. It allows you to configure the shortcode settings.

mobile slideshow shortcode

5From Add Images area, choose images.

mobile slideshow shortcode

6Click Save Changes and publish or update the page to check the result.

Configuring the Settings

There are several types of settings in the Mobile Slideshow pop-up. We explain all the settings in the following sections.

SettingDescription

Orientation Use this option to set the orientation of the slideshow. Available options are: Portrait, Landscape
Mobile Color  Use this option to set the color of mobile phone which will act as a frame for your slideshow. Available options are: Black, White
Animation Speed Use this option to set the animation speed of the slide changing effect for the slideshow. The value is in milliseconds.
Slideshow Speed Use this option to set the waiting time between each slide change for the slideshow. The value is in milliseconds.
Pause on Hover Enable this option if you want the slideshow to stop changing slides while the mouse is over slideshow. If set to disabled, the slides will continue changing even if the mouse is over the slideshow.

Adding an Entrance Animation

Viewport Animation field in the settings pop-up allows you to hide the shortcode initially and make it visible with animation when you scroll in the browser.

You can read Configuring shortcode’s entrance animation article for further explanation.

Adding an Extra Class Name

Extra Class Name field in the setting pop-up allows you to add an extra class name to the shortcode. It’s useful when you need to target the shortcode in a style sheet or JavaScript file.

You can read Adding custom CSS class to a shortcode article for further explanation.

Did this answer your question?