Image Slideshow Shortcode

Updated on September 13, 2017

The image slideshow shortcode is a very useful shortcode when it comes to showing so many images in one place.

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

To see the Image slideshow shortcode in action, you may check the demo page.

Image slideshow shortcode - demo


Displaying Image Slideshow

To add Image slideshow shortcode:

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

Image slideshow shortcode - visual composer screen

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

Image slideshow shortcode - add element

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

Image slideshow shortcode - Image slideshow settings

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

Configuring Other Settings

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

Setting Description
Heading Title Adds a title of the the slideshow.
Width Sets width of the slideshow.
Height Sets height of the slideshow.
Margin Top Adds an empty space above the slideshow.
Margin Bottom  Adds an empty space below the slideshow.

Configuring Animation Settings

There are  some animation options which allows you to set the animation type, direction and behaviour for the sliders.

Setting Description
Animation Effect Sets the animation effect for the slideshow images. There are two available options: Fade and Slide.
Animation Speed  Sets the speed of the animations in milliseconds.
Slideshow Speed  Sets the speed of the slideshow cycling in milliseconds.
Smooth Height  Allows height of slider to animate smoothly in horizontal mode
Direction Nav  Decides whether to enable the navigation arrow of the slideshow or not.
Pause On Hover  Determines whether to pause slideshow on mouse over or not.

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?