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
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.
