/** * AAE Loop Grid Slider — frontend styles. * * The slider MOTION (track transform, autoplay, effects) is owned by the shared * nested-slider runtime. But the runtime only SETS the `--aae-slides-per-view` * / `--aae-slide-gap` custom properties — the rule that turns them into a real * slide WIDTH lives in the Nested Slider's own stylesheet, which this widget * deliberately does not load (to avoid a cross-widget CSS dependency). So we * replicate that one sizing rule here, scoped to this widget. Without it every * slide takes its natural width and only one shows regardless of slidesPerView. */ .aae-a-loop-grid-slider { // Nav arrows (reused from the Nested Slider) anchor to this positioned box. position: relative; .aae-slider__viewport { overflow: hidden; width: 100%; position: relative; box-sizing: border-box; contain: layout paint; } .aae-slider-track { overflow: visible !important; will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translateZ(0); // The runtime writes transform/gap; keep it a single non-wrapping row so // slides line up horizontally before the runtime measures them. flex-wrap: nowrap; // NOTE: the track's default 10px `.e-con` padding (which shrinks the slide // content box and leaves a right-side gap) is zeroed via the atomic base-style // in AAE_A_Loop_Slide_Track::define_base_styles() — that emits `padding: 0` on // the element's own `.e-{id}` class, which is what actually controls the // padding here (not the `--padding-*` custom props). Doing it there keeps it // overridable by the user's Style-panel padding. See that method for details. // Slide sizing from the runtime-set custom props — the SAME formula the // Nested Slider uses (nestedslider.scss `.aae-slider-track > *`). Targets // the track's direct children so it also covers loop clones the runtime // injects. `--aae-slides-per-view` defaults to 1 if the runtime hasn't set // it yet, so keep a sane fallback. > * { flex: 0 0 calc((100% - (var(--aae-slide-gap, 0px) * (var(--aae-slides-per-view, 1) - 1))) / var(--aae-slides-per-view, 1)); max-width: calc((100% - (var(--aae-slide-gap, 0px) * (var(--aae-slides-per-view, 1) - 1))) / var(--aae-slides-per-view, 1)); box-sizing: border-box; transform-style: preserve-3d; transition: transform 0.5s ease-out; height: var(--aae-slide-height, auto); will-change: transform, opacity; backface-visibility: hidden; -webkit-backface-visibility: hidden; } } .aae-a-loop-grid-empty { width: 100%; padding: 2rem; text-align: center; opacity: 0.7; } // Contain the nav arrow's SVG to the fixed 44px badge (the nav elements are // reused from the Nested Slider). Mirrors nestedslider.scss — this widget // deliberately does not load that stylesheet, so the rule is duplicated here. // Without it an old-saved 65px SVG (created before the `aae-a-svg` 20px utility // existed) overflows the fixed badge and breaks the circle, making the same // slider look different in the editor vs the frontend. .aae-a-navigator-prev, .aae-a-navigator-next { cursor: pointer; .e-svg-base, svg { max-width: 100%; max-height: 100%; } &.e--disabled, &.is-disabled, &[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; pointer-events: none; } } } // Pagination edge-state (mirrors the Loop Grid): hide the inert control on the // boundary pages. FRONTEND ONLY — scoped on `body` (the editor-active class is // on the preview , NOT on the slider div, so a `.aae-a-loop-grid-slider:not(...)` // scope would wrongly fire in the editor and hide Load More there). The editor // keeps every piece visible + styleable. body:not(.elementor-editor-active) { .aae-a-loop-grid-slider { .aae-pg-first [data-aae-nav="prev"], .aae-pg-last [data-aae-nav="next"], .aae-pg-last [data-aae-loadmore] { display: none; } } }