Skip to content
Log a Ticket
  • There are no suggestions because the search field is empty.

Swipe

The Swipe tool is an overlaid slider that allows visitors to make comparisons between two images, usually a before-and-after version of the same setting, with the two images superimposed.

The slider allows users to see more or less of one image or the other. This tool provides and elegant solution to help users visualise planned changes or review historical progress.

Here's an example of how you can configure the Swipe tool:

⚙️Settings

Basic

  • Image On - sets an image file for the image on the left/top.
  • Label As - sets a label that appears on the image (i.e. ‘before’ or ‘after’).
  • Alternative Description - sets alt text to be used to assist people with screen readers.
  • Image Two - sets an image file for the image on the right/bottom.
  • Label As - sets a label that appears on the image (i.e. ‘before’ or ‘after’).
  • Alternative Description - sets alt text to be used to assist people with screen readers.

 

Display

  • Swiper Position - sets how much of the first image is visible by default. The default is set to 50%.
  • Comparison Orientation - sets whether the tool will be compared left to right or top to bottom
  • Size - sets the display size of the tool
    • Small
    • Medium
    • Large
    • Auto - expands to fit the entire content area size
  • Position- sets the alignment of the tool.
  • Visual Diff Border - changes the appearance of the border between images.

 

Advanced

  • Block Title - sets an optional title for the block.
  • Block Description - sets an optional description for the Block that will appear below the Block Title.
  • Block Description Position - selects the description to appear at the top or bottom of the image.

Key actions you can perform in the Swipe tool:

Add images

  • Under the Basic tab, select the Choose Image field under Image One.
  • The File Manager will open, from which you can upload an image or choose an existing image.
  • When you have selected your image, repeat the same step under Image Two.
  • When both image fields are filled, select the blue Add button.

Swap images

  • You can swap images any time by navigating to the desired image under the Basic tab.
  • Left click the image and select Clear.
  • This will return the field to a blank Choose Image field, from which you can select or upload a new image.
  • When complete, select the blue Add button.