Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

The Before After Image Slider allows you to visualize the difference between two images.

Content

Table of Contents

Looking for a WordPress version?

inline_preview_image

 Macro parameters

LabelParameterDefaultDescriptionHosting Type
Methodmethod
Choose from 5 different methods to visualize the images.Server, Cloud
Left ImageleftImage
Search box for the left image.Server, Cloud
Right ImagerightImage
Search box for the right image.Server, Cloud
Widthwidth50%Width of the container.Server
Slide on mouse movehoverYesIf enabled slides will be moved with the mouse move.Server, Cloud
Overlayed SlideroverlayedSliderNoBy default the slider is beneath the images. Settings this option the slider is on top of the images.Server, Cloud
CSS ClassescssClasses
Parameter to set additional css classes to enable further features or for advanced customization.Server

Methods

Overlay

Before After Image Slider
methodoverlay
width100%
leftImageimage_galleries_uuid_stefanie_kerner__1__jpg-2212f968-5588-4f60-aef4-222c5eb3acab
rightImageimage_galleries_uuid_stefanie_kerner__2__jpg-925f43c3-9f8e-491d-82ad-a4f2e12d6296

From Right

Before After Image Slider (Deprecated)
methodfrom-right
width80%
leftImage1376302
rightImage1376303

Side by Side

Before After Image Slider (Deprecated)
methodside-by-side
width80%
leftImage1376302
rightImage1376303

Fade In

Before After Image Slider (Deprecated)
methodfade-in
width80%100%
leftImage1376302rightImage1376303image_galleries_uuid_stefanie_kerner__1__jpg-2212f968-5588-4f60-aef4-222c5eb3acab
rightImageimage_galleries_uuid_stefanie_kerner__2__jpg-925f43c3-9f8e-491d-82ad-a4f2e12d6296

From Left

Before After Image Slider (Deprecated)
methodfrom-left
width80%
leftImage1376302
rightImage1376303

Other Configurations

Overlaid handle

Before After Image Slider (Deprecated)
methodoverlay
width80%
overlayedSlidertrue
leftImage1376302
rightImage1376303

Rounded Slider

Before After Image Slider (Deprecated)
methodoverlay
cssClassesrounded-handle
width80%
leftImage1376302
rightImage1376303


Hidden handle (Mouse only)

Before After Image Slider (Deprecated)
methodoverlay
cssClasseshidden-slider
width80%
overlayedSlidertrue
leftImage1376302
rightImage1376303

Subtle slider

Before After Image Slider (Deprecated)
methodoverlay
cssClassessubtle
width80%
leftImage1376302
rightImage1376303