Before And After Image Slider

Before And After Image Slider

HTML Code:

				
					<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/jQuery-Before-After-Image-Comparison-Plugin-Image-Reveal/dist/jquery.imageReveal.js"></script>
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/jQuery-Before-After-Image-Comparison-Plugin-Image-Reveal/dist/jquery.imageReveal.min.css" />

<div class="row big">
<div id="example1" class="imageReveal"> <img decoding="async" src="https://diywebsitespro.com/wp-content/uploads/2022/12/Hexagon-Portfolio-Effect-In-Elementor.jpg" title="Before"> <img decoding="async" src="https://diywebsitespro.com/wp-content/uploads/2022/12/Fold-Images-In-Elementor-With-CSS.jpg" title="After"> </div>
</div>

<script>
    $(window).load(function() {
                $('#example1').imageReveal({
                    barWidth: 5,
                    touchBarWidth: 50,
                    paddingLeft: 0,
                    paddingRight: 0,
                    startPosition: 0.50,
                    showCaption: true,
                    captionChange: 0.5,
                    width: 600,
                    height: 350
                });

                

               
            });
    
</script>

CSS Code:

				
					.row {
float: left;
}
.imageReveal {
margin-right: 10px;
}
.row.small .imageReveal {
display: inline-block;
}
.row.small .imageReveal-caption {
top: auto;
bottom: 10px;
}
Click here
alt="tutorials" alt="Hexagon Portfolio Code" alt="GLOWING NEON TEXT" alt="Water Ripple Effect " alt="Water Ripple Effect code" alt="Rotate And Z-Index" alt="Not Linktree" alt="User IP and Location" alt="auto play video" alt="Click Button to Change Image And Text Using Elementor" alt="7 Day Repeat Countdown Timer" alt="Blog Posts Only" alt="Change Background And Text Colour On Scroll Code"
Home
Before And After Slider
Elementor Pro Tutorials
Tutorials
YouTube Channel