flowbase-image-comparison-wf.js

<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 {
    -webkit-appearance: auto;
  }
</style>