ISWA: Enhancement to elastic-carousel - #201
Open
jsandland wants to merge 15 commits into
Open
Conversation
Removes the hover-driven elastic-grow interaction in favor of simple prev/next arrow controls (shown only when more than 3 cards) that page the visible cards out of view via scroll-snap, matching the updated Figma. Also restores hover-to-play video behavior and fixes video source resolution to prefer the source URL over a corrupted data-video-source reference.
|
Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
|
|
Adds a chevron button next to the card title that shows/hides the description text, matching the updated Figma. Also switches the carousel background to white.
jsandland
changed the title
Moves the left inset onto the block's own top-level class with boosted specificity, since the previous rule on the nested scroll container wasn't taking effect.
Brandon32
approved these changes
Aug 3, 2026
The toggle click handler was only bound to the tiny 24x24px chevron icon button, so clicking the title text itself did nothing. Moves the listener to the title row (text + chevron) so the whole row is clickable, per feedback that the hit box felt too small.
The initial arrow-state check ran synchronously during block decoration, before Franklin reveals the block (blocks are commonly hidden via CSS until decoration finishes), so scrollWidth/clientWidth both read 0 and incorrectly concluded there was nothing left to scroll to, permanently disabling the next arrow even when more cards were available. Deferring that initial check to requestAnimationFrame so it runs after the block is actually visible and laid out, same fix as the equivalent bug in bento-grid. Also unifies both arrows to the same black background instead of the previous dark-prev/light-next scheme, which didn't make sense visually.
decorateBlockText tags the title h3 as a heading-N element, which picks up Milo's shared heading treatment and renders as doubled or ghosted text. The card title is fully custom-styled, so the class just needs to be removed.
Add a plus/minus toggle in the card header that reveals the description in place, with the media area flexing to absorb the height change so the card's bottom edge stays fixed. Restore the decorative chevron after the footer title link, and hide the Video Speed Controller extension's badge if present.
Use getBoundingClientRect for sub-pixel precision when locking the collapsed height, clip overflow on the container as a safety net, and set the video to display:block to remove the baseline-alignment gap that was throwing off the collapsed media height by ~7.5px.
The global h3 heading rule was leaking a negative letter-spacing value onto this 14px title, crowding the glyphs together.
Cap card width (294-394px) and height (485px) on mobile, cap the media image at 316px tall, split padding-left by breakpoint, and add a decorative peeking-cards-behind-the-front-card effect on mobile using pseudo-elements on the block (avoids overflow/margin- collapse conflicts with the actual scrolling cards). Also hide the prev/next arrows on mobile, and set the block/card backgrounds to black/white respectively.
Give the enabled arrow a solid white fill and the disabled arrow a subtle ring instead of a dimmed dark circle. Cap the card and its container at 346px max-width, and fix a leftover 1200px breakpoint that was bleeding desktop-only styles into the tablet range.
JasonHowellSlavin
requested changes
Aug 6, 2026
JasonHowellSlavin
left a comment
JasonHowellSlavin
left a comment
There was a problem hiding this comment.
Typically, variants will modify existing functionality by additive means, usually by adding a class and configuring new styles with increased specificity under those additional class names.
Not sure what went on here, but it seems we've nuked all the animations, and some of the nice to have UI smoothing. We probably need to go back to the drawing board with this one.
Replace the native scroll/sticky-based stacking attempt with a JS-controlled index: each card is absolutely positioned via an inline top offset (0/20/40px for the two peeks + front), animated with a CSS transition, and driven by swipe/drag/wheel gestures that advance or retreat by exactly one card. Cards not yet reached sit just below the visible, clipped container and slide up into place. Only the footer CTA is clickable on mobile now (the rest of the card no longer intercepts taps), and a scrubber tracks position through the deck. Tablet/desktop are untouched - the wrap stays display:contents there, and the isMobile check now uses matchMedia to stay consistent with the CSS breakpoint instead of relying on window.innerWidth, which could disagree with the effective CSS viewport in some testing setups.
JasonHowellSlavin
approved these changes
Aug 13, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Resolves: MWPW-202491
Test URLs:
Before: https://main--da-bacom--adobecom.aem.live/drafts/jsandlan/elastic?martech=off
After: https://elastic-carousel--da-bacom--adobecom.aem.live/drafts/jsandlan/elastic?martech=off