How to add an Image Comparison Slider

Step 1

Download the zip file : https://github.com/pehaa/beerslider
Then upload and enqueue the files BeerSlider.css and BeerSlider.js :

wp_enqueue_style( 'beerSlider', plugin_dir_url( __FILE__ ) . 'assets/css/BeerSlider.css' );

wp_enqueue_script( 'beerSlider-js', plugin_dir_url( __FILE__ ) . 'assets/js/BeerSlider.js', '','', true );

Step 2

The structure is pretty simple :

1 - Add a Section
2 - Inside this section, add a Div with the class name "beer-slider"
3 - Inside this div, add an Image (the before image)
4 - Add a Div with the class name "beer-reveal"
5 - Inside this div, add an Image (the after image)
6 - Add a Code Block

Step 3

In the Code Block, add this Javascript :

document.querySelector(".beer-slider").setAttribute('data-beer-label', 'ELEMENTOR');
document.querySelector(".beer-reveal").setAttribute('data-beer-label', 'OXYGEN');

new BeerSlider( document.getElementById( "div_block-12-214" ), {start: 50} );

Replace "div_block-12-214" by the ID of the first Div.

The data-beer-labels are optional, you can leave them empty or do not add them at all.

Finally, to change the labels, you can style them in this way :

.beer-reveal[data-beer-label]:after, .beer-slider[data-beer-label]:after {
	background:black;
	font-size:50px;
}

More info in the official website : https://pepsized.com/wp-content/uploads/2018/09/beerslider/demo/index.html