Fullwidth Slideshow Shortcode

Last Updated on

The fullwidth slideshow shortcode provides a simplistic approach to having a quick slideshow in full width mode.

In this article, we will explain how to display and configure the fullwidth slideshow shortcode.

In this article


Displaying the Fullwidth Slideshow Shortcode

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

Fullwidth slideshow shortcode - visual composer screen

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

Fullwidth slideshow shortcode - add element

4
When the shortcode is added, a new pop-up screen called Fullwidth Slideshow Settings will open that allows you to configure the shortcode settings. From the Add Image option, click on the + icon to choose an image.

Fullwidth slideshow shortcode - Fullwidth slideshow settings

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

Configuring Other Settings

There are other settings in the fullwidth slideshow settings pop-up that allow you to customize the slideshow. Configure the settings as required.

SettingDescription
Top & Bottom Padding Sets empty spaces above and below the slideshow.
Top And Bottom Borders Color Sets the top and bottom border colors of the slideshow.

Configuring Backgrounds

There are three options in the background settings that allow you to set the image slider background.

SettingDescription
Background Image Adds a background image to the wrapping box of the slideshow.
Background Attachment  Sets the wrapping box background image to scroll or fixed. There are two available options: Scroll and Fixed
Background Position Sets the positioning of the background image of the slideshow wrapping box. Available options are: Left Top, Center Top, Right Top, Left Center, Center Center, Right Center, Left Bottom, Center Bottom and Right Bottom

Configuring Animations and 3D Settings

There are some 3D and animation options that allow you to set the animation and 3D effects for the sliders.

SettingDescription
Enable 3D Background  Enables a semi Parallax effect for the background image of the slideshow wrapping box.
3D Speed Factor Sets the speed of the Parallax effect of the wrapping box background image.
Stretch Images to the Container? Determines whether to scale up the images to fit the container or not.
Animation Effect Sets the style of the animation. There are two options available: Fade and Slide.
Animation Speed Sets the speed of the animations in milliseconds.

Configuring Other Slideshow Settings

These options allow you to control the slideshow speed, direction, pause on hover and height.

SettingDescription
Slideshow Speed  Sets the speed of the slideshow cycling in milliseconds.
Pause On Hover Determines whether to pause the slideshow on mouseover or not.
Smooth Height Determines whether to use the smooth height functionality while changing between slides of different heights or not.
Direction Nav Decides whether to enable the navigation arrow of the slideshow or not.
x
Note: To have a real full width slideshow  you need to set the row or page section container Full Width and Full Width content. The images should be large because they will show in real dimensions.

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.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket