About This Demo
This carousel uses a non-standard HTML structure with
.custom-panel elements instead of the usual
.carousel-slide. The default extraction would fail
or produce poor results, so overrideSlides is used
to provide custom extraction logic that reads the slide content
and builds SlideItem objects manually.
Non-Standard Carousel Structure
⚠ No Keyboard SupportPortal Component Fixes Code
Uses overrideSlides to extract slides from the non-standard .custom-panel structure.
fixCarousel('#custom-slider-1', '.custom-panel')
.carouselLabel('Featured Solutions')
.overrideSlides(function() {
var slides = [];
var panels = document.querySelectorAll('#custom-slider-1 .custom-panel');
panels.forEach(function(panel, i) {
var inner = panel.querySelector('.custom-panel-inner');
if (!inner) return;
slides.push({
content: inner.innerHTML,
index: i + 1,
originalElement: panel,
hasClickableContent: !!panel.querySelector('a, button')
});
});
return slides;
})
How to Test (after AE JS is loaded)
- Press Tab to reach the trigger button before the carousel.
- Press Enter to open the accessible carousel modal.
- Use ← / → to navigate. Each slide should display the heading, description, and CTA link from the original panels.
- Click a CTA link (e.g., "Explore Security") — the click is proxied to the original element on the page.
- Press Escape to close the modal.