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.
Displaying Image Slideshow
To add Image slideshow shortcode:
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.
