Slideshow Box Shortcode

Updated on November 17, 2017

The Slideshow Box shortcode allows you to insert an image slideshow box on any page. You can use this shortcode when you need to show a beautiful image slideshow background for your content on a page.

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

Displaying Slideshow Box Shortcode

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

Slideshow box shortcode - visual composer screen

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

Slideshow box shortcode - add element

4When the shortcode is added, a new pop-up screen called Slideshow Box Settings opens. It allows you to configure the shortcode settings.
5From Add Images option click on the + icon to choose an image

Slideshow box shortcode - Slideshow box settings

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

Configuring Other Settings

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

Configuring Backgrounds

There are three options for the background settings which allow you to set the image slider background.

Setting Description
Cover Whole Background Determines whether to scale the background image to be as large as possible so that the background area is completely covered by the background image or not.
Background Repeat Decides how the background image should be repeated. There are four available options: No Repeat, Repeat, Repeat Vertically and Repeat Horizontally
Background Position  Sets the horizontal and vertical positioning of the background image for the wrapping box of the slideshow. Available options are: Center Center, Left Top, Center Top, Right Top, Left Center, Right Center, Left Bottom, Center Bottom, Right Bottom

Configuring Slideshow Speed and Overlay

There are two options for speed and two other options for overlay. Configure the settings as required.

Setting Description
Slideshow Speed  Sets the speed of the slideshow cycling in milliseconds.
Transition Speed Sets the animation speed of the slide effect in milliseconds.
Color Overlay Sets a color as an overlay for image in the slideshow. It improves the readability of textual content inside the slideshow box.
Overlay Mask Pattern? Determines whether to add a pattern mask over the image or not.

Configuring Slideshow Box Size

There are five options for the slideshow box which allow you to set the slideshow box size and spacing.

Setting Description
Section Min Height Defines a minimum height of the slideshow box section.
Full Screen zheight? Decides whether to cover the whole visible screen height or not. There are two available options: Yes, No.
Full Screen Width Content? Determines whether to set the width of the content shortcode inside the slideshow box to full or not. There are two available options: Yes, No.
Padding Top Defines the space between the content and top border of slideshow content section
Padding Bottom Defines the space between the content and bottom border of slideshow content section

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?