diff --git a/libs/blocks/carousel/carousel.css b/libs/blocks/carousel/carousel.css index 3fcb968a49..963d6b85d0 100644 --- a/libs/blocks/carousel/carousel.css +++ b/libs/blocks/carousel/carousel.css @@ -20,6 +20,11 @@ margin-bottom: 1.8rem; } +/* Late loading controls */ +.carousel .is-delayed { + visibility: hidden; +} + .carousel .carousel-wrapper { position: relative; overflow: hidden; diff --git a/libs/blocks/carousel/carousel.js b/libs/blocks/carousel/carousel.js index f71f429b7c..d454e46288 100644 --- a/libs/blocks/carousel/carousel.js +++ b/libs/blocks/carousel/carousel.js @@ -20,7 +20,7 @@ function decorateNextPreviousBtns() { const previousBtn = createTag( 'button', { - class: 'carousel-button carousel-previous', + class: 'carousel-button carousel-previous is-delayed', 'aria-label': 'Previous', 'data-toggle': 'previous', }, @@ -30,7 +30,7 @@ function decorateNextPreviousBtns() { const nextBtn = createTag( 'button', { - class: 'carousel-button carousel-next', + class: 'carousel-button carousel-next is-delayed', 'aria-label': 'Next', 'data-toggle': 'next', }, @@ -43,7 +43,7 @@ function decorateLightboxButtons() { const expandBtn = createTag( 'button', { - class: 'lightbox-button carousel-expand', + class: 'lightbox-button carousel-expand is-delayed', 'aria-label': 'Open in full screen', }, LIGHTBOX_ICON, @@ -51,7 +51,7 @@ function decorateLightboxButtons() { const closeBtn = createTag( 'button', { - class: 'lightbox-button carousel-close', + class: 'lightbox-button carousel-close is-delayed', 'aria-label': 'Close full screen carousel', }, CLOSE_ICON, @@ -342,7 +342,7 @@ export default function init(el) { const fragment = new DocumentFragment(); const nextPreviousBtns = decorateNextPreviousBtns(); const slideIndicators = decorateSlideIndicators(slides); - const controlsContainer = createTag('div', { class: 'carousel-controls' }); + const controlsContainer = createTag('div', { class: 'carousel-controls is-delayed' }); fragment.append(...slides); const slideWrapper = createTag('div', { class: 'carousel-wrapper' }); @@ -395,4 +395,11 @@ export default function init(el) { } slides.slice(NoOfVisibleSlides).forEach((slide) => slide.querySelectorAll('a').forEach((focusableElement) => { focusableElement.setAttribute('tabindex', -1); })); handleChangingSlides(carouselElements); + + function handleLateLoadingNavigation() { + [...el.querySelectorAll('.is-delayed')].forEach((item) => item.classList.remove('is-delayed')); + parentArea.removeEventListener(MILO_EVENTS.DEFERRED, handleLateLoadingNavigation, true); + } + + parentArea.addEventListener(MILO_EVENTS.DEFERRED, handleLateLoadingNavigation, true); }