Massive gap between carousel image and controls

Hello,

The gap is caused by a conflict between SiteGround Optimizer’s lazy loading and your carousel. When the page loads, the carousel initialises before the images have loaded — so it calculates its height based on the placeholder (a 1×1px transparent GIF), leaving a large empty space. Once the real images load, the height never gets recalculated unless you interact with the carousel, which is why scrolling through it a few times makes the gap disappear.

The fix is a small script that listens for each carousel image finishing loading and then tells the carousel to recalculate its height.

1. Go to Appearance → Elements → Add New Element
2. Create a new Hook Element and set the hook to wp_footer
3. Set the display rules so it only loads on the relevant page
4. Add a Code block and paste in the following:

<script>
document.addEventListener('DOMContentLoaded', function () {
  var interval = setInterval(function () {
    var carouselEl = document.querySelector('.gb-carousel-2476ad6f');
    if (!carouselEl) return;

    var swiperInstance = carouselEl.swiper;
    if (!swiperInstance) return;

    clearInterval(interval);

    document.addEventListener('lazyloaded', function (e) {
      if (carouselEl.contains(e.target)) {
        swiperInstance.updateAutoHeight();
        swiperInstance.update();
      }
    });
  }, 100);
});
</script>

Let me know how you get on.

Hello,

It seems the script I provided creates more issues. Please, remove the script and get in touch with SiteGround support regarding their optimizer. They will be able to help.