Autoplay Loop Slider

Controls (What the user can customize)

• Items (Content)

  • Upload as many images as you want

  • Optional background image per item (falls back to the main image if not set)

  • Title text

• Layout

  • Number of visible items

  • Card width (when single view)

  • Card height

  • Gap between items

  • Border radius

• Background

  • Background height (vh)

  • Dynamic background per active item

  • Overlay dim opacity

• Styling

  • Image fit (cover / contain / fill)

  • Active border color

  • Active border width

  • Title color

  • Full typography control (font, size, weight, etc.)

• Motion & Behavior

  • Auto-play toggle

  • Auto-play speed (interval)

  • Infinite looping (built-in)

  • Smooth linear motion

  • Active item detection (center focus)

What this slider is perfect for

• Portfolio showcasesHighlight selected work with cinematic transitions and focus.

• Visual storytellingGreat for sequencing landscapes, photography, or brand visuals.

• Hero sectionsCreates an immersive first impression with motion and depth.

• Creative studios & agenciesWorks well for art direction, campaigns, or mood-driven content.

• Product highlightsShowcase featured items with a premium, editorial feel.

• Lookbooks / collectionsIdeal for fashion, interiors, or curated visual sets.

Why it stands out

• Infinite, seamless motion (no hard stops)

• Background transitions tied to active slide

• Subtle GSAP text animation (SplitText lines)

• Center-focused interaction for clarity

• Feels cinematic, not just functional