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>