Photo Roller Shortcode

Updated on November 17, 2017

The Photo Roller shortcode displays a picture on your page or post with sliding effect. This shortcode has a few settings for you to configure it.

In this article, we’ll explain how to display and configure the Photo Roller shortcode.

Displaying the Photo Roller Shortcode

To add the shortcode:

1Add a new page or edit an existing page.
2From the Visual Composer screen, click on the + button.

Audio player shortcode - visual composer section

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

photo roller shortcode

4When the shortcode is added, a new pop-up screen called Photo Roller Settings will open that allows you to configure the shortcode settings.

photo roller shortcode

5Configure the settings as required.
Setting Description

Image Upload an image or select an appropriate image from Media Library. Pay attention that the image width should be bigger than height.
6Click on Save Changes and publish or update the page to check the result.

Configuring the Photo Roller Settings

There are a few settings that allow you to configure the photo roller shortcode to your needs.

Setting Description

Rolling Axis Sets the direction how the image slides. The available option is Horizontal.
Pause on Hover The rolling effect is stopped when you mouse over the image.
Reverse Direction If this option is enabled, the image will roll into the opposite direction.
Rolling Speed Sets the rolling speed of the image. The value is in the pixels/sec.

Configuring the Visibility for Devices

The Visibility for Devices field in the settings pop-up allows you to configure the visibility of the shortcode on different devices.

You can read the Configuring the visibility for devices article for further explanation.

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.

If there are any questions regarding Photo Roller settings, please contact our support team.

Did this answer your question?