Skip to content

Commit 1f0a84a

Browse files
committed
fix: Lock carousel caption area to measured max height
Measure caption heights across slides at runtime and apply a shared min-height so switching between slides with and without caption text does not cause layout jump. Keep this behavior scoped to carousels with captions and recalculate on load and resize for responsive stability.
1 parent 877a260 commit 1f0a84a

1 file changed

Lines changed: 33 additions & 0 deletions

File tree

layouts/shortcodes/carousel.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,3 +147,36 @@
147147
>
148148
</button>
149149
</div>
150+
151+
{{ if $captionsParam }}
152+
<script>
153+
(() => {
154+
const root = document.getElementById("{{ $id }}");
155+
if (!root) return;
156+
157+
const items = Array.from(root.querySelectorAll("[data-twe-carousel-item]"));
158+
const captions = items
159+
.map((item) => item.querySelector("figcaption"))
160+
.filter((caption) => caption);
161+
if (captions.length < 2) return;
162+
163+
const measureAndFixCaptionHeight = () => {
164+
const hiddenItems = items.filter((item) => item.classList.contains("hidden"));
165+
hiddenItems.forEach((item) => item.classList.remove("hidden"));
166+
167+
const maxHeight = Math.max(
168+
...captions.map((caption) => Math.ceil(caption.getBoundingClientRect().height)),
169+
);
170+
171+
hiddenItems.forEach((item) => item.classList.add("hidden"));
172+
captions.forEach((caption) => {
173+
caption.style.minHeight = `${maxHeight}px`;
174+
});
175+
};
176+
177+
window.requestAnimationFrame(measureAndFixCaptionHeight);
178+
window.addEventListener("load", measureAndFixCaptionHeight, { once: true });
179+
window.addEventListener("resize", measureAndFixCaptionHeight);
180+
})();
181+
</script>
182+
{{ end }}

0 commit comments

Comments
 (0)