Mobile Slideshow Shortcode

Last Updated on

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.

In this article


Displaying Mobile Slideshow Shortcode

To add Mobile Slideshow shortcode:

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

mobile slideshow shortcode

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

mobile slideshow shortcode

4
When 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

5
From Add Images area, choose images.

mobile slideshow shortcode

6
Click 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
OrientationUse 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 SpeedUse this option to set the animation speed of the slide changing effect for the slideshow. The value is in milliseconds.
Slideshow SpeedUse this option to set the waiting time between each slide change for the slideshow. The value is in milliseconds.
Pause on HoverEnable 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.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket