Compare two images using a slider control, or overlay a transparent image over a base image
Image Compare Slider is a a free WordPress plugin we created that lets you create a slider to compare two images one over the other. Using a slider control you can drag left to see the first image, right to see the second, and smoothly transition between them. You can download this plugin in a ZIP file at the bottom of this page.
Q. Why is this plugin not in the WordPress repository? It’s a faff to add it to the repository even though the plugin is fully compliant (it passed test using the ‘Check Plugin (PCP)’ plugin). Also, as it’s a niche plugin within similar functionality to other plugins, I haven’t bothered. However, I may decide to in the future.
Image Compare Slider plugin installation and usage instructions
From the WordPress plugins section, go to the ‘add plugin’ section then upload the ‘image-compare-slider.zip’ file
Activate the plugin. Under the Media option in the left column you will now find the control panel for the image slider called ‘Image sliders’
Create the two images you would like to use and upload them to your WordPress library. The images should be the same dimensions (e.g. 1600px by 800px). They can be JPG or PNG
Open the Image Sliders control panel. To create a new slider:
Give your slider a name. this won’t affect it but will help you know which slider is which
Click the first ‘open media library’ to select your first image – the ‘before’ image
Click the second ‘open media library’ to select your second image – the ‘after’ image
the ‘aspect ratio’ section should have automatically filled using the dimensions of your images. If this hasn’t happened, simply put in the dimensions of your image as a number, e.g. if your image is 1600x800px, put ‘1600’ in the width box and ‘800’ in the height box
You will now see a preview of your slider
Click ‘save slider’ button
You will now see your new slider in the ‘registered sliders’ section. Copy the shortcode to your clipboard
Open the page where you would like to add the slider. Using the Guttenberg shortcode block to add the shortcode to your page. If you’re using the classic WordPress editor, simply view the page code view and paste the shortcode into the page
Example sliders
Exterior to interior slider – see through the walls
This example slider compares two views of a Tudor house: the exterior aerial photo and the Matterport virtual tour we created. Drag the slider to transition from the outside view to the inside, revealing the detailed interior we captured.
2D floor plan transition to 3D floor plan
This example slider compares two types of floor plans: a traditional schematic layout and a 3D design. Drag the slider to see the difference and discover how much more immersive and engaging the 3D floor plan is.
Adding labels to a 2D photographic floor plan
This slider showcases a 2D photographic floor plan created from a Matterport virtual tour. As you move the slider, room labels appear, identifying each space within the building
