Photo Roller Shortcode

Last Updated on

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.

In this article

Displaying the Photo Roller Shortcode

To add the shortcode:

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

Audio player shortcode - visual composer section

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

photo roller shortcode

When 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

Configure the settings as required.
Setting Description
ImageUpload an image or select an appropriate image from Media Library. Pay attention that the image width should be bigger than height.
Click 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 AxisSets the direction how the image slides. The available option is Horizontal.
Pause on HoverThe rolling effect is stopped when you mouse over the image.
Reverse DirectionIf this option is enabled, the image will roll into the opposite direction.
Rolling SpeedSets 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.

Was this helpful?

Related Topics

Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket