Image Comparison Slider

Example

In your content, simply include two images inside an element with the comparison-slider class:

PS! Use the {{path}} variable to include a dynamic file-path to the current folder.

Advanced Settings

x3-style-frame Include this class to display a frame around the images.
data-orientation Set "horizontal" (default) or "vertical" orientation for the slider.
data-offset Set initial offset position of the slider to any number between 0.0 and 1.0 (default 0.5).
data-hover Enable or disable the before-after mouse hover effect.

Information

Identical Image Dimensions
For this plugin to work properly, you need to include two different images with identical dimensions.

Image Sizes
Unlike the X3 gallery module, this plugin will not serve resized images depending on device and screen size. It is therefore recommended that you use a sensible image-size, for example 1024 or 1280 px.

Plugin Display Width
Since the X3 layout is responsive by default, images will automatically scale to the width of the context module. This also means that images will scale to fit the screen width on small devices.

Hide Page Gallery
If you are displaying images from the current folder, you may want to prevent the same images from also displaying in the page's gallery module. Go to page › settings › gallery, and check "Hide Gallery Module".

Plugin loaded On-Demand
The Javascript- and CSS required for the comparison-slider plugin, are loaded "on-demand" once the element is detected. This means it could take 1-2 seconds before the plugin initiates on first page visit.

Custom before-after text
If you want to change the before-after text on mouse hover, you will need to add custom CSS.

.comparison-slider .twentytwenty-before-label:before {
    content: "Before";
}
.comparison-slider .twentytwenty-after-label:before {
    content: "After";
}

* settings › custom › custom css