Before & After Image Slider

This module allows you to visually compare two images. There are many use cases such as …

  • Photo comparison: The photographer can show their photo editing skills by putting the photos before and after.
  • Product comparison: Compare two product images by color, design, etc.
  • Comparison of renovations: e.g. home / office renovations, etc.
  • View two stages of transformation: before and after hair styling, weight loss, medical surgery, etc.

App screenshot:

Configuration options:

  • URL before and after images
  • Cursor type: horizontal and vertical
  • Separator color and start position
  • Text labels before and after
  • Label color, background color and position
  • Descriptive text

Editor screen:

Notes:

  • You must use image URLs, there are no image upload features in this module. (The Siberian image upload module element requires you to specify the fixed size image that does not fit this module, that’s why we have implemented the image URL.) You can use our  Editor Image Uploader module  to upload quickly images within your Zero Codes editor.
  • For colors, you can use any valid RGB, RGBA, or HEX color code format.
  • You can create a single slider in a single instance of this module. However, you can add multiple instances of this module in your app.
  • You have to reload the features page (after saving a module) to see the changes in an editor previewer on the right side.

Related Articles