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.
This commit is contained in:
@@ -147,3 +147,36 @@
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{{ if $captionsParam }}
|
||||
<script>
|
||||
(() => {
|
||||
const root = document.getElementById("{{ $id }}");
|
||||
if (!root) return;
|
||||
|
||||
const items = Array.from(root.querySelectorAll("[data-twe-carousel-item]"));
|
||||
const captions = items
|
||||
.map((item) => item.querySelector("figcaption"))
|
||||
.filter((caption) => caption);
|
||||
if (captions.length < 2) return;
|
||||
|
||||
const measureAndFixCaptionHeight = () => {
|
||||
const hiddenItems = items.filter((item) => item.classList.contains("hidden"));
|
||||
hiddenItems.forEach((item) => item.classList.remove("hidden"));
|
||||
|
||||
const maxHeight = Math.max(
|
||||
...captions.map((caption) => Math.ceil(caption.getBoundingClientRect().height)),
|
||||
);
|
||||
|
||||
hiddenItems.forEach((item) => item.classList.add("hidden"));
|
||||
captions.forEach((caption) => {
|
||||
caption.style.minHeight = `${maxHeight}px`;
|
||||
});
|
||||
};
|
||||
|
||||
window.requestAnimationFrame(measureAndFixCaptionHeight);
|
||||
window.addEventListener("load", measureAndFixCaptionHeight, { once: true });
|
||||
window.addEventListener("resize", measureAndFixCaptionHeight);
|
||||
})();
|
||||
</script>
|
||||
{{ end }}
|
||||
|
||||
Reference in New Issue
Block a user