Smooth Slider
Smooth Slider für Elementor
Der hochperformante Marquee-Slider ohne Jumping. Perfekt für Logo-Showcases, Partner-Slider, News-Ticker und überall dort, wo endlos scrollende Inhalte gebraucht werden.
🎯 Das Problem mit herkömmlichen Slidern
Die meisten Marquee-Plugins nutzen prozentuale CSS-Animationen (translateX(-50%)). Das funktioniert mathematisch nicht korrekt, wenn ein Gap zwischen den Elementen existiert. Das Ergebnis: Ein sichtbarer Sprung am Ende jedes Loops.
Smooth Slider löst dieses Problem durch dynamische, pixel-basierte Keyframes. JavaScript berechnet die exakte Distanz (Content-Breite + Gap) und generiert perfekte Animationen – auf jedem Gerät, bei jeder Bildschirmgröße.
✨ Alle Features im Detail
4 Richtungen
Vollständige Kontrolle über die Scroll-Richtung.
- Links (Standard)
- Rechts
- Nach oben
- Nach unten
Inhaltstypen
Flexibel einsetzbar für verschiedene Inhalte.
- Bilder mit individueller Breite
- Text mit voller Typografie-Kontrolle
- Links mit target/nofollow
- Lightbox mit Galerie-Navigation
Edge-Fade Effekte
Professionelle Ausblendung an den Rändern.
- Transparent (CSS Mask)
- Custom Gradient (2 Farben)
- Blur (Weichzeichner)
- Größe individuell einstellbar
Hover-Effekte
5 kombinierbare Effekte für Interaktivität.
- Zoom (Skalierung einstellbar)
- Schatten (Box-Shadow)
- Rotation (Winkel einstellbar)
- 3D-Kippen (Intensität einstellbar)
- Deckkraft-Änderung
Animationen
Eingangs-Animationen und Timing-Presets.
- 6 Timing-Funktionen (Linear, Ease, Bounce...)
- 5 Eingangs-Animationen
- Dauer individuell einstellbar
- Pause bei Hover
- Richtungsumkehr bei Hover
Mehrere Zeilen
Bis zu 4 parallele Slider-Zeilen.
- 2-4 Zeilen einstellbar
- Abwechselnde Richtung
- Geschwindigkeits-Variation
- Parallax-Effekt
- Zeilen-Abstand einstellbar
Separator
Trenner zwischen den Elementen.
- Text/Symbol (z.B. • | ★)
- Icon (Font Awesome)
- Bild
- Linie (Breite/Höhe einstellbar)
- Farbe & Größe anpassbar
Lightbox
Integrierte Vollbild-Ansicht für Bilder.
- Vor/Zurück-Navigation
- Keyboard-Steuerung (← →)
- Touch-Swipe auf Mobile
- Bild-Counter (1/7)
- Caption-Unterstützung
⚡ Performance & Technologie
Smooth Slider wurde von Grund auf für maximale Performance entwickelt. Keine Kompromisse.
GPU-Beschleunigung
- translate3d für Hardware-Rendering
- will-change: transform
- backface-visibility: hidden
- Composite Layer Optimierung
Bildoptimierung
- Native Lazy Loading
- decoding="async"
- srcset für responsive Bilder
- WebP-Unterstützung
Ressourcen-Sparen
- IntersectionObserver für Viewport-Pause
- matchMedia für Orientierung
- Kein Resize bei Adressleisten-Änderung
- Kein jQuery (~90KB gespart)
Core Web Vitals
- Kein Layout-Shift (CLS: 0)
- Schnelles LCP durch Lazy Load
- Minimale JavaScript-Ausführung
- Async/Defer Loading
📋 Technische Spezifikationen
| Eigenschaft | Details |
|---|---|
| JavaScript | Vanilla ES6+, ~8KB (minified), keine Dependencies |
| CSS | ~10KB (minified), CSS Custom Properties, keine Präprozessoren |
| Animation | Dynamische @keyframes, pixel-basiert, requestAnimationFrame |
| Browser-Support | Chrome 60+, Firefox 55+, Safari 12+, Edge 79+ (kein IE) |
| WordPress | 5.0+ erforderlich, getestet bis 6.7 |
| Elementor | 3.0+ erforderlich (Free oder Pro) |
| PHP | 7.4+ erforderlich, 8.0+ empfohlen |
| Internationalisierung | Vollständig übersetzbar, POT-Datei enthalten |
♿ Accessibility (WCAG 2.1)
Semantik
role="marquee"für Screenreaderaria-labelfür Beschreibungaria-hiddenfür Duplikate
Keyboard
- Tab-Navigation möglich
- Leertaste: Pause/Play
- Pfeiltasten: Richtung ändern
- ESC: Lightbox schließen
Reduced Motion
prefers-reduced-motionSupport- Animation wird vollständig deaktiviert
- Statische Darstellung als Fallback
🔒 Sicherheit & Datenschutz
Smooth Slider wurde nach WordPress Coding Standards entwickelt und ist vollständig DSGVO-konform.
Keine externen Verbindungen
Keine API-Calls, keine CDNs, keine Fonts von extern. Alles lokal.
Keine Cookies
Smooth Slider setzt keine Cookies und speichert keine Nutzerdaten.
Vollständiges Escaping
Alle Ausgaben werden mit esc_attr(), esc_html(), esc_url() escaped.
💡 Anwendungsfälle
🎛️ Elementor Controls Übersicht
| Tab | Sektionen | Anzahl Controls |
|---|---|---|
| Inhalt | Inhalt, Einstellungen, Separator, Mehrere Zeilen, Effekte | 25+ |
| Style | Container, Rand-Ausblendung, Elemente, Hover-Effekte | 20+ |
| Erweitert | Lazy Loading, Viewport Pause, WebP/srcset | 5+ |
