Fullwidth Slideshow Shortcode

Updated on November 17, 2017

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.

Displaying the Fullwidth Slideshow Shortcode

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

Fullwidth slideshow shortcode - visual composer screen

3In 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

4When 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

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

Top & Bottom PaddingSets empty spaces above and below the slideshow.
Top And Bottom Borders ColorSets 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.

Background ImageAdds 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 PositionSets 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.

Enable 3D Background Enables a semi Parallax effect for the background image of the slideshow wrapping box.
3D Speed FactorSets 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 EffectSets the style of the animation. There are two options available: Fade and Slide.
Animation SpeedSets 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.

Slideshow Speed Sets the speed of the slideshow cycling in milliseconds.
Pause On HoverDetermines whether to pause the slideshow on mouseover or not.
Smooth HeightDetermines whether to use the smooth height functionality while changing between slides of different heights or not.
Direction NavDecides whether to enable the navigation arrow of the slideshow or not.

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?