Swipe Slideshow Shortcode

Updated on November 17, 2017

Swipe slideshow shortcode provides a simplistic approach to have a quick slideshow with swipe effect.

In this article, we will explain displaying and configuring Swipe slideshow shortcode.


Displaying Swipe Slideshow Shortcode

To add Swipe slideshow shortcode:

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

Swipe slideshow shortcode - visual composer screen

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

Swipe slideshow shortcode - add element

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

Swipe slideshow shortcode - Swipe slideshow settings

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

Configuring Other Settings

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

SettingDescription
Image Size Sets the image width and height.
Slide Direction Sets the direction of image slide. There are two options available: Horizontal, Vertical.
Animation Speed Sets the speed of the animations in milliseconds.
Slideshow Speed Sets the speed of the slideshow cycling in milliseconds.
Direction Nav Decides whether to enable the navigation arrow of the slideshow or not.

Configuring Image Size

There are some options inside Image Size which allow you to customize slideshow image size. Configure the settings as required:

SettingDescription
Resize & Crop Crops the slideshow image using custom width and height option. Available sub options are Width and Height. This option is not recommended.
Default – Original Size Sets the original dimension of the slideshow image.
Default – Large Size Sets the slideshow image to maximum available size.
Default – Medium Size Sets the slideshow image to a medium size.

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 stylesheet or JavaScript file.

You can read Adding custom CSS class to a shortcode article for further explanation.

Did this answer your question?