Fluid Flexbox Accordion Carousel

This is a Fluid Flexbox Accordion Carousel. It manages the spatial distribution of images using CSS flex-basis and animates an infinite scrolling loop via DOM node manipulation. Its function is to showcase featured content without hard clipping, allowing users to preview adjacent items while maintaining absolute focus on the active selection.

Specs

• Weight: ~5 KB. Zero external dependencies.
• Performance: High visual fluidity. The expansion relies on CSS flexbox reflowing and transform: translate3d. [!] However, the infinite loop is achieved by physically detaching and re-attaching DOM nodes (append/prepend), which triggers layout repaints on every step.
• Theming / Customization: Controlled via CSS variables (--width, --height). The typography utilizes a text-clipped gradient (background-clip: text) for a neon aesthetic.
• Responsiveness: Fluid flexbox logic handles horizontal scaling. JavaScript intervenes via window.matchMedia to strictly cap the number of visible nodes (5 on mobile, 8 on desktop) to prevent layout cramping.
• Graceful Degradation: [!] Without JavaScript, the infinite loop and auto-play fail, but CSS hover states (flex-basis: calc(var(--width) / 2)) still function natively. Lacks ARIA live regions to announce slide changes to screen readers.

Anatomy

• HTML (Pug): A semantic .carousel wrapper housing a .carousel__list. Inside, .carousel__item blocks combine a background <img> with .carousel__contents (text). Navigation buttons sit alongside the list.
• CSS: The structural core. It sets a base state of flex: 1 1 10% for all items, overriding the [data-active] item to a fixed flex-basis: var(--width). It heavily utilizes contain: layout and isolation: isolate to optimize browser rendering during reflows.
• JS: The state manager. It tracks the active index, listens for keyboard/click events, manages the auto-play setInterval, and manipulates the array of DOM nodes to cycle the carousel endlessly.

Logic

The architectural highlight is the infinite loop mechanism, which avoids moving a long, continuous track.

const nextSlide = () => {
    const index = getActiveIndex();
    const $slides = $q(".carousel__item");
    const $first = $slides[0];
    
    // Physically move the first node to the end of the DOM list
    $first.remove();
    $list.append($first);
    
    activateSlide( $q(".carousel__item")[index] );
}

Instead of tracking coordinates and applying a massive transform: translateX to a wrapper div, the script slices the first element out of the DOM and appends it to the very end of the list. Because CSS flexbox is inherently fluid, the browser automatically slides the remaining items to the left to fill the gap. This ensures the carousel can run forever without ever hitting a scrolling limit or requiring complex coordinate resets.

Feel

Elastic and tactile. The interaction abandons rigid slide-by-slide snapping in favor of fluid structural expansion. Hovering over inactive items causes them to swell slightly, acknowledging user intent before a click commits the layout change. The DOM-shifting loop feels seamless, generating a continuous, mechanical conveyor belt of content.