image-compare-block.js

// https://cdn.knightlab.com/libs/juxtapose/latest/js/juxtapose.min.js
// https://cdn.knightlab.com/libs/juxtapose/latest/css/juxtapose.css
// https://images.unsplash.com/photo-1543349689-9a4d426bee8e?w=1920&h=1000&fit=crop
// https://images.unsplash.com/photo-1492136344046-866c85e0bf04?w=1920&h=1000&fit=crop
(() => {
  const blockElements = document.querySelectorAll('BLOCKSELECTOR');
  if ( !blockElements.length) {
    return;
  }
  blockElements.forEach(blockElement => {
    let image1 = blockElement.dataset.image1;
    let image2 = blockElement.dataset.image2;
    if (image1 && image2) {    
      try {
        image1 = JSON.parse(image1);
        image2 = JSON.parse(image2);
      } catch (e) {
        console.error(e);
        image1 = false;
        image2 = false;
      }

      if (image1 && image1.url && image2 && image2.url) {
        const blockSelector = blockElement.id ? '#' + blockElement.id : 'BLOCKSELECTOR';
        // Input a custom id for each block if you want multiple blocks on a page
        new juxtapose.JXSlider(blockSelector, [
          {
            src: image1.url,
            label: blockElement.dataset.label1
          },
          {
            src: image2.url,
            label: blockElement.dataset.label2
          }
        ],
                               {
          animate: true,
          showLabels: true,
          showCredits: true,
          startingPosition: "50%",
          makeResponsive: true
        });
      }
    }  
  })
})();