slider
aa-slider turns a list of [aa-slider-item] elements into a seamless looping carousel powered by GSAP’s horizontalLoop helper. Modes are space-separated tokens inside the attribute value; combine freely.
aa-slider modes:
| Token | Effect |
|---|---|
| (empty) | Basic slider; prev/next + thumb buttons advance one slide. No autoplay, no drag. |
draggable | Mouse + touch drag with InertiaPlugin throw, snaps to nearest slide. |
center | Centers the active slide horizontally in the container. |
none | Don’t init at this breakpoint. Combine with the | shorthand (splits at md) or any of the -sm / -md / -lg / -xl suffix attributes for responsive on/off. |
Autoplay is a separate, standalone attribute — aa-autoplay — so the same configuration shape applies uniformly to sliders and tabs and aa-delay keeps its meaning of “tween start delay” everywhere.
aa-autoplay value | Effect |
|---|---|
| (attribute absent) | No autoplay. |
(empty: aa-autoplay) | Autoplay enabled at the init default interval (autoplay.interval, default 4s). No hover pause. |
<number> (e.g. "3") | Autoplay with the given dwell in seconds. |
hover-pause | Add hover-pause: mouseenter pauses, mouseleave resumes (non-touch only). |
<number> hover-pause | Both — e.g. aa-autoplay="3 hover-pause". |
none | Opt out (e.g. aa-autoplay="3|none" — autoplay on desktop, off on mobile). |
<div aa-slider="draggable center" aa-duration="0.6" aa-autoplay="3 hover-pause">…</div>
<!-- Bento on desktop, autoplay carousel on mobile --><div aa-slider="none|" aa-autoplay="none|3">…</div>Structural attributes
Section titled “Structural attributes”| Attribute | What it marks |
|---|---|
aa-slider | Slider root. |
aa-slider-item | Each slide. Keep it as a thin flex wrapper — put visual styling on a child element so borders/shadows don’t get caught by the slider’s transform math. |
aa-slider-prev | Previous-slide button. |
aa-slider-next | Next-slide button. |
aa-slider-button | Thumbnail / pagination button. Index inferred from DOM order. |
aa-slider-target | When set on an external aa-slider-button, references the slider’s id. |
aa-slider-current | Element whose text content reflects the current 1-based slide index. |
aa-slider-total | Element whose text content reflects the total slide count. |
aa-slider-progress | Inside aa-slider-button, fills over the resolved aa-autoplay interval. Value is width (default), height, or circle. For circle, mark an SVG (or place an SVG inside the marked element) — the lib finds the inner <circle> and tweens its stroke-dashoffset from full circumference to zero. |
Config attributes
Section titled “Config attributes”| Attribute | Default | Notes |
|---|---|---|
aa-duration | (init) | Seconds for each slide transition. |
aa-autoplay | (off; init interval when present) | See the autoplay table above. Drives the per-slide dwell + progress-bar fill. |
aa-ease | (init) | Any GSAP ease — used for transitions and progress bars. |
Required GSAP plugins
Section titled “Required GSAP plugins”gsap, ScrollTrigger, Draggable, InertiaPlugin.
Animations triggered by slide activation
Section titled “Animations triggered by slide activation”aa-animate elements inside an [aa-slider-item] are automatically driven by slide activation: they play when the slide becomes active and reverse when it becomes inactive. No aa-trigger attribute needed — the slider emits slide-active / slide-inactive events on each slide and the closest container ancestor is the inferred trigger.
<div aa-slider aa-autoplay="3"> <div class="track"> <div aa-slider-item> <div class="slide-card"> <h2 aa-animate="fade-up">Headline</h2> <!-- inferred: event:slide-active --> </div> </div> </div></div>If you need to opt out — e.g. an animation inside a slide that should still respond to scroll position — set aa-trigger="scroll" explicitly to override the inference.
Keyboard navigation
Section titled “Keyboard navigation”When the slider has focus, Arrow Left / Arrow Right step backwards / forwards, Home jumps to the first slide, End to the last. The slider root gets tabindex="0" automatically.
Live demo — basic prev / next
Section titled “Live demo — basic prev / next”Live demo — centered, autoplay with hover-pause, draggable, with thumb-bullets and progress
Section titled “Live demo — centered, autoplay with hover-pause, draggable, with thumb-bullets and progress”A slider with aa-slider="draggable center" and aa-autoplay="3 hover-pause" shows multiple slides at once with the active one centered. Hover pauses the autoplay; mouseleave resumes. Each thumb has an inner [aa-slider-progress] that fills during the dwell.
Live demo — circular progress thumbs
Section titled “Live demo — circular progress thumbs”aa-slider-progress="circle" on an SVG (or a wrapper containing one) animates the inner <circle>’s stroke-dashoffset to draw the ring during the dwell. The user controls the visual — viewBox, radius, stroke colour and width — entirely via the SVG markup and CSS.
Live demo — animations triggered on slide activation
Section titled “Live demo — animations triggered on slide activation”Each slide contains a heading and paragraph with plain aa-animate="fade-up" — no aa-trigger attribute. Because they live inside [aa-slider-item], they’re inferred to use event:slide-active: they fade up on activation and reverse on deactivation.