Before & After Images

Head Script
<link href="https://unpkg.com/beerslider/dist/BeerSlider.css" rel="stylesheet" type="text/css" />
‍
Before Body Script‍
<script src="https://unpkg.com/beerslider/dist/BeerSlider.js"></script><script>
 // Wait for the page to load
 $(document).ready(function () {
   // Select all elements with the class "image-wrapper" and loop through them
   const imageWrappers = document.getElementsByClassName("image-wrapper");
   for(const imageWrapper of imageWrappers){
     // Get the source of the first and second image within the current "image-wrapper" element
     const firstImage = imageWrapper.querySelectorAll('img')[0].src;
     const secondImage = imageWrapper.querySelectorAll('img')[1].src;
     // Create a template for the beer slider using the first and second image sources
     const template = `
       <div class="beer-slider" data-beer-label="before">
         <img src="${firstImage}">
         <div class="beer-reveal" data-beer-label="after">
           <img src="${secondImage}">
         </div>
       </div>
     `;
     // Remove the first and second images
     imageWrapper.querySelectorAll('img')[1].remove();
     imageWrapper.querySelectorAll('img')[0].remove();
     // Append the template to the current "image-wrapper" element
     imageWrapper.insertAdjacentHTML('afterbegin',template);
   }
     
   // Select all elements with the class "beer-slider" and loop through them
   const beerSliders = document.getElementsByClassName("beer-slider");
   for(const beerSlider of beerSliders){
     // Initialize the BeerSlider plugin on the current element, passing in the "start" data attribute as the option
     new BeerSlider(beerSlider, { start: beerSlider.dataset.start });
   }
 });</script>
<style>
 .beer-slider {
   height: 100% !important;
 }  .beer-slider,
 .beer-slider>img {
   width: 100% !important;
 }
 
 .beer-range::-webkit-slider-thumb {