1. Home
  2. Docs
  3. SUMNIMA
  4. Theme Features
  5. Debug & Common Setup...
  6. Carousel bottom gap

Carousel bottom gap

The live theme doesn’t have a gap under the carousel, but if you encounter any issues, you can use the JavaScript below in the Script Manager.

<script>
  function setMinImageHeight() {
    let minHeight = Infinity;

    const container = document.querySelector('.CarouselHome');
    const wrapper = container.querySelector('.CarouselHome .swiper-wrapper');
    const slides = container.querySelectorAll('.CarouselHome .swiper-slide');
    const images = container.querySelectorAll('.CarouselHome .carousel-image img');

    // Reset heights
    container.style.height = 'auto';
    wrapper.style.height = 'auto';
    slides.forEach(slide => slide.style.height = 'auto');

    // Find the minimum image height
    images.forEach(img => {
      const h = img.offsetHeight;
      if (h > 0 && h < minHeight) {
        minHeight = h;
      }
    });

    // Apply height if valid
    if (minHeight < Infinity) {
      container.style.height = `${minHeight}px`;
      wrapper.style.height = `${minHeight}px`;
      slides.forEach(slide => {
        slide.style.height = `${minHeight}px`;
      });
    }
  }

  // Run after window load and on resize
  window.addEventListener('load', () => {
    setTimeout(setMinImageHeight, 100);
  });

  window.addEventListener('resize', () => {
    setTimeout(setMinImageHeight, 100);
  });
</script>