Before and After Image Slider

Before and After Slider demo image

The Before and After Slider widget offers a simple and effective way to show two images in the same frame. Site visitors can manually move the slider to compare both images at once. Application possibilities for the widget are vast!

Demo: https://demo.wocode.com/before-and-after-slider

Tutorial Video

Setup

  • Place the Before and After Image Slider on your page, where you would like it to appear.
  • Widget height and width are set using the blue grab handle on the bottom right corner of the widget.

WIDGET OPTIONS (CONTENT)

  • Open the widget options.
  • Unique ID: Enter a unique name here if you intend to use multiple Before and After Sliders on the same page.
  • Slider Direction: The slider handle can move left/right (Horizontal) or up/down (Vertical)
  • Images: This option allows you to load the two images you will use in the slider.Note that the images will need to be prepped prior to loading into the widget. Use a photo editor like Photoshop, and ensure that the two images have the exact same dimensions.
  • Enable Overlay:  The overlay applies a cover overlay and shows the before and after labels when the user hovers over the slider. The overlay color is set in the Design section.
  • Before / After Label: These text fields determine the text labels that are shown over the two images. The default is “before” and “after”, though you are free to use any text or language you like.
  • Default Handle Position: This determines the position in which the handle is set when the page loads. The default percentage is 50, which is centered in the middle of the slider.
  • Move Slider on Hover: This allows the slider to be moved by hovering, without clicking or engaging the handle.
  • Move with Handle Only: With this setting enabled, the slider can only be moved if the user clicks on the handle.
  • Click to Move Handle: This enables the slider handle to move to the position where the slider clicked.

WIDGET OPTIONS (DESIGN)

The design section offers styling and spacing controls. The labels for these settings are self explanatory and will not be discussed in detail here.