Modern Comparison Slider

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!

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"]