Two side-by-side slideshows not loading properly

https://konishigaffney.squarespace.com/

Password: buildings

Hey, I need some urgent help! I have two gallery slideshows, both side-by-side and full-bleed on desktop. They're not loading properly. They're loading inconsistently. Sometimes the images load, sometimes they don't. There's no rhyme or reason so it's a nightmare trying to troubleshoot. I have some CSS, as well as JavaScript customisations. I've added everything in incrementally and I can't identify what's causing it to freak out. See attached an image of what's happening.

JavaScript is here:

<script>
document.addEventListener("DOMContentLoaded", function () {
  // Define the URLs you want to link each block's titles to, mapped by block ID
  const blockLinks = {
    "#block-ab9c11b8611441d0ea09": "https://konishigaffney.squarespace.com/homes",  // First block's link
    "#block-4bf3f8640b5502c963d0": "https://konishigaffney.squarespace.com/culture", // Second block's link
    // Add more mappings of block IDs to URLs as necessary
  };

  // Loop over each block ID in the blockLinks object
  for (const blockId in blockLinks) {
    // Select all title elements within the block
    const titleElements = document.querySelectorAll(`${blockId} .sqs-gallery-block-slideshow .meta .meta-title`);

    // Check if title elements are found
    if (titleElements.length > 0) {
      // Loop through each title element in the block
      titleElements.forEach(titleElement => {
        // Attach a click event listener to each title element
        titleElement.addEventListener('click', function(event) {
          // Prevent default click behavior if any
          event.preventDefault();

          // Redirect to the URL associated with the block
          window.location.href = blockLinks[blockId];
        });

        // Optionally add some styles to indicate that the title is clickable
        titleElement.style.cursor = 'pointer'; // Change cursor to pointer

        // Style hover effect for the title
        titleElement.addEventListener('mouseover', function() {
          titleElement.style.color = '#F9A800'; // Change text color on hover for visual feedback
        });

        titleElement.addEventListener('mouseout', function() {
          titleElement.style.color = ''; // Reset text color when not hovering
        });
      });
    } else {
      console.warn(`Title elements not found for block ID: ${blockId}`);
    }
  }
});
</script>

CSS is here: 

.sqs-gallery-block-slideshow.sqs-gallery-block-show-meta .sqs-active-slide .meta {
    background-color: transparent !important; /* Makes meta background transparent */
}

body.homepage .sqs-gallery-block-slideshow .slide.loaded .meta {
    background-color: transparent !important; /* Ensures transparent background */
}

.sqs-gallery-block-slideshow .meta .meta-title {
  font-family: "PPMori-Regular" !important; /* Sets custom font */
  font-size: 35px !important; /* Sets fixed font size */
  letter-spacing: 0px !important; /* Removes extra letter spacing */
}

.sqs-gallery-block-slideshow .meta {
  display: flex !important;
    align-items: center !important;
}

#collection-65ea057defe9aa3ba4fd335d .header-nav, .burger {
    display: none !important; /* Hides header navigation for a specific collection */
}

[class*=sqs-col] .sqs-block {
  padding-left: 0px !important; /* Removes left padding from block */
  padding-right: 0px !important; /* Removes right padding from block */
  max-width: 100vw  !important; /* Limits block width to viewport width */
  max-height: 100vh  !important; /* Limits block height to viewport height */
}

  section[data-section-id="65ecadb971dce57d47748ad7"] { .content-wrapper {
  max-width: 100vw  !important; /* Ensures content fills the viewport width */
  max-height: 100vh  !important; /* Ensures content fills the viewport height */
  overflow-x: hidden !important; /* Prevents horizontal scrolling */
      padding: 0px !important; /* Removes all padding */
      margin: 0px auto; /* Centers the content */
}
}

#collection-65ea057defe9aa3ba4fd335d .page-section {
    margin-top: -80px !important; /* Adjusts the top margin, possibly causing overlap */
}

.sqs-gallery-design-stacked-slide img {
  height: 100vh !important; /* Sets height to full viewport height, might cause issues if container is smaller */
}

  body.homepage .gallery-block, 
  body.homepage .gallery-block .slide {
    height: 100vh !important; /* Sets height to full viewport height, might cause issues if container is smaller */
  }

I can't get the galleries to load at all, same as in the screenshot.

Where did you get the code?

I wrote it myself... So clearly there's an error somewhere! 😭 If I removed the code, would you know how to re-build for me? Happy to pay for your time.

35 minutes ago, merakiconceptstudio said:

I wrote it myself... So clearly there's an error somewhere! 😭 If I removed the code, would you know how to re-build for me? Happy to pay for your time.

Could you share your design goals and requirements for this LP? There are a few ways we could go about this. I could likely help tomorrow, send me a DM.

I'm very impressed at your granularity of commenting throughout your code, excellent!

I've just sent you a DM! 😃

If anyone else could help sooner, I'd love to hear from you. Here's how it looks for me (it works fine, it's only broken on some browsers/devices):

There is an option crop images when edit gallery slideshow, try toggle it off.