Modern Comparison Slider

FAQ

How do I use this plugin?

Place two images of the same size one after another in the editor (tip: If you’re using the new editor, make sure your block that holds these two images is set to ‘Classic’)

Wrap these two images with the [compare] [/compare] tag. That’s all it needs to get working!

How can I style the look and feel?

There is a settings page found at Settings > Modern Compare Slider that will affect all sliders on the website. However, you can override a look and feel of any particular slider by using these options:

To disable the drop shadow on the controls

[compare shadow="false"]

To change the color of the controls

[compare color="#4299e1"]

To change the theme

[compare theme="standard"]
[compare theme="circle"]

To change the starting point, where the value is the percentage to show the before image initially.

[compare startingpoint="75"]

To start the slider on hover

[compare hoverstart="true"]

To disable smoothing

[compare smoothing="false"]

To adjust the smoothing amount, where the higher the value, the more dampening you feel

[compare smoothingamount="250"]

You can add multiple options to a slider like so

[compare smoothing="false" color="#4299e1" theme="circle"]