Before After

With this widget, you can create a wonderful before/after image transition of a photo. You can switch from the images simply by dragging a slider line.


Before After

  1. Before image: the image before the slider line;
  2. After image: the image after the slider line;
  3. Orientation: the orientation of the slider line between vertical (default) and horizontal;
  4. Default offset: the offset (in percent) of the slider line, default is in the middle.


  1. Move the slider on hover: if enabled the slider line follows your pointer without any click;
  2. Move with the handle only: if enabled it allows to swipe anywhere on the image to control slider movement;
  3. Click to move: if enabled it allows you to click or tap anywhere on the image to move the slider line.

Overlay and Labels

  1. No overlay: if enabled it hides the overlay effect between before and after images;
  2. Before: if No overlay is enabled, here you can customize the label of the previous image;
  3. After: if No overlay is enabled, here you can customize the label of the following image.


Here there is a working example

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us