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_stefaniecobra_kernerblend_right_1__jpg-2212f9686ea12c49-558885d9-4f60480c-aef495d0-222c5eb3acabb01e35c5696c
rightImageimage_galleries_uuid_stefaniecobra_kernerblend_left_21__jpg-925f43c317443cb9-9f8e26b0-491d43cb-82adbeac-a4f2e12d62963a87767a68aa

From Right

Before After Image Slider
methodfrom-right
width100%
leftImageimage_galleries_uuid_stefaniecobra_kernerblend_right_1__jpg-2212f9686ea12c49-558885d9-4f60480c-aef495d0-222c5eb3acabb01e35c5696c
rightImageimage_galleries_uuid_stefaniecobra_kernerblend_left_21__jpg-925f43c317443cb9-9f8e26b0-491d43cb-82adbeac-a4f2e12d62963a87767a68aa

Side by Side

Before After Image Slider (Deprecated)
methodside-by-side
width80%100%
leftImage1376302rightImage1376303image_galleries_uuid_cobra_blend_right_1__jpg-6ea12c49-85d9-480c-95d0-b01e35c5696c
rightImageimage_galleries_uuid_cobra_blend_left_1__jpg-17443cb9-26b0-43cb-beac-3a87767a68aa

Fade In

Before After Image Slider
methodfade-in
width100%
leftImageimage_galleries_uuid_stefaniecobra_kernerblend_right_1__jpg-2212f9686ea12c49-558885d9-4f60480c-aef495d0-222c5eb3acabb01e35c5696c
rightImageimage_galleries_uuid_stefaniecobra_kernerblend_left_21__jpg-925f43c317443cb9-9f8e26b0-491d43cb-82adbeac-a4f2e12d62963a87767a68aa

From Left

Before After Image Slider (Deprecated)
methodfrom-left
width80%100%
leftImage1376302rightImage1376303image_galleries_uuid_cobra_blend_right_1__jpg-6ea12c49-85d9-480c-95d0-b01e35c5696c
rightImageimage_galleries_uuid_cobra_blend_left_1__jpg-17443cb9-26b0-43cb-beac-3a87767a68aa

Other Configurations

Overlaid handle

Before After Image Slider (Deprecated)
methodoverlay
width80%100%
overlayedSlidertrue
leftImage1376302rightImage1376303image_galleries_uuid_cobra_blend_right_1__jpg-6ea12c49-85d9-480c-95d0-b01e35c5696c
rightImageimage_galleries_uuid_cobra_blend_left_1__jpg-17443cb9-26b0-43cb-beac-3a87767a68aa

Rounded Slider

Before After Image Slider (Deprecated)
methodoverlay
cssClassesrounded-handle
width80%100%
leftImage1376302rightImage1376303image_galleries_uuid_cobra_blend_right_1__jpg-6ea12c49-85d9-480c-95d0-b01e35c5696c
rightImageimage_galleries_uuid_cobra_blend_left_1__jpg-17443cb9-26b0-43cb-beac-3a87767a68aa


Hidden handle (Mouse only)

Before After Image Slider (Deprecated)
methodoverlay
cssClasseshidden-slider
width80%overlayedSlidertrue100%
leftImage1376302rightImage1376303image_galleries_uuid_cobra_blend_right_1__jpg-6ea12c49-85d9-480c-95d0-b01e35c5696c
rightImageimage_galleries_uuid_cobra_blend_left_1__jpg-17443cb9-26b0-43cb-beac-3a87767a68aa

Subtle slider

Before After Image Slider (Deprecated)
methodoverlay
cssClassessubtle
width80%100%
leftImage1376302rightImage1376303image_galleries_uuid_cobra_blend_right_1__jpg-6ea12c49-85d9-480c-95d0-b01e35c5696c
rightImageimage_galleries_uuid_cobra_blend_left_1__jpg-17443cb9-26b0-43cb-beac-3a87767a68aa