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