Laptop Slideshow Shortcode

Updated on November 17, 2017

The laptop slideshow shortcode provides a laptop frame around a simple slideshow. Using this shortcode you can show a beautiful image slider inside a laptop frame on your page.

In this article, we will explain how to displaying and configure the laptop slideshow shortcode.

To see the laptop slideshow shortcode in action, check out the demo page.

Laptop slideshow shortcode - demo

Displaying the Laptop Slideshow

To add the laptop slideshow shortcode:

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

Laptop slideshow shortcode - visual composer section

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

Laptop slideshow shortcode - add element

4When the shortcode is added, a new pop-up screen called Laptop Slideshow Settings will open that allows you to configure the shortcode settings. Add a title to the title field.

Laptop slideshow shortcode - Laptop slideshow settings

5In the Add Image option click on the + icon inside the square box to add your image. The recommended image size is 632 x 405 pixels.

Laptop slideshow shortcode - add image

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

Configuring the Settings

There are a few settings in the laptop slideshow settings pop-up that allow you to customize the the slideshow. Configure the settings as required.


Slide Nav Size Defines the size the of slideshow navigation buttons. There are four available options: Full Width, One Half,  One Third and One Fourth.
Animation Speed Sets the speed of the animations in milliseconds.
Slideshow Speed Sets the speed of the slideshow cycle in milliseconds.
Pause On Hover  Determines whether or not to pause the slideshow on mouseover or not.

Adding an Entrance Animation

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

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

Adding an Extra Class Name

The Extra Class Name field in the settings 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 the Adding a custom CSS class to a shortcode article for further explanation.

Did this answer your question?