LCD Slideshow Shortcode

Updated on November 17, 2017

LCD slideshow shortcode provides a LCD frame wrapping a simple slideshow. You can use this shortcode when you need to show a beautiful image slider inside an LCD screen frame on your page.

In this article, we will explain displaying and configuring LCD slideshow shortcode.

To see the LCD slideshow shortcode in action, you may check the demo page.

LCD slideshow shortcode - demo


Displaying LCD Slideshow

To add LCD slideshow shortcode:

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

LCD slideshow shortcode - visual composer section

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

LCD slideshow shortcode - add element

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

LCD slideshow shortcode - LCD slideshow settings

5From Add Image setting, click on the + icon to choose an image. The recommended image size is 872 x 702 pixel.

LCD slideshow shortcode - add image

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

Configuring the Settings

There are other settings in LCD Slideshow Settings pop-up which allow you to customize the the slideshow. Configure the settings as required.

SettingsDescripiton

Animation Speed Sets the speed of the animations in milliseconds.
Slideshow Speed Sets the speed of the slideshow cycling in milliseconds.
Pause On Hover  Determines whether to pause slideshow on mouse over or not.

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 stylesheet or JavaScript file.

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

Did this answer your question?